如何在cakephp中使用javascript验证我的html表单控件？

Question

我正在使用一个弹出窗口并在其中应用表格。 现在，我希望使用javascript验证控件。 但是，每当我尝试提交表单时，它根本不会验证我的表单字段，而只是提交页面

我的js代码如下：

function validateForm()
 {  
    var regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
    var uname = document.getElementById('user_name').value;
    if(uname=="")
    {
        alert("You cannot leave the email field empty");
        return false;
    }
    else if(uname.search(regex) == -1)
    {
        alert("Invalid email address format");
        return false;
    }
    else
    {
        return true;
    }
    return true;

 }

我的HTML div代码如下。 我使用div是因为我的弹出窗口仅从该div加载：

<div id="logincontent">
<div class="form-box-top">
    <div class="form-box-bottom">
    <?php echo $this->Form->create('User',array('controller' => 'users', 'action' => 'login', 'id'=>'login', 'name'=>'login','onsubmit'=>'return validateForm();'));?>
        <div class="form-box-middle">
            <div class="login-form">
                <div class="re-title3">
                    <a class="pass" onclick="forget();" href="#">forgot password</a>
                </div>
                <div class="input-row">
                    <label>EMAIL</label>                    
                    <?php echo $this->Form->input('username', array('label' => '','class'=>'required','style'=>'margin: -5px 0px 0px 24px;','id'=>'user_name')); ?>
                </div>
                <div class="input-row"> 
                    <label>PASSWORD</label>
                    <?php echo $this->Form->input('password', array('type'=>'password','class'=>'required','label' => '','style'=>'margin: -5px 0px 0px 24px;')); ?>
                </div>
            </div>
            <div class="button_3">
                <?php echo $this->Form->submit('',array('label' => '','class'=>''));?>
            </div>
            <div class="button_3_1">
            <a style="background: url(<?php echo $this->webroot       ?>/images/registor-bt2.png) no-repeat left top;
float: left;border: 0px;width: 236px;height: 47px;" onclick="register()"; href="#"></a>
            </div>
            <div class="cr"></div>
        </div>
    <?php echo $this->Form->end(); ?>
    </div>
</div>

现在，每当我提交表单时，我都希望通过js函数验证我的字段

我已经尝试了很多，但不知道它会带来恶意结果还是无法预测的结果。

任何建议将被接受和赞赏。

提前感谢...

Answer 1

如果尚未使用Firebug，请安装它。

我建议使用JQuery UI对话框->模态表单和验证

如果您不想使用它，则可能至少要查看第16行提供的正则表达式代码。