表单验证无法正常工作

时间：2012-07-16 10:11:15

标签： jquery forms validation

我正在使用jquery验证表单并遇到一些问题。 jquery验证码：

$(function(){
    var form = $('#contactus');
    var name = $('#name');
    var nameInfo = $('#nameInfo');
    var email = $('#email'); 
    var emailInfo = $('#emailInfo');
    var phone = $('#phone');
    var phoneInfo = $('#phoneInfo');
    var msg = $('#message');
    var msgInfo = $('#messageInfo');
    var reg=/^[a-zA-Z. ]+$/;
    var mail=/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 





    function validateName()
    {
        if(name.val()=='')
        {
            name.addClass('error');
            nameInfo.text('Please fill up your full Name');
            nameInfo.addClass('error');
            return false;
        }else if(reg.test(name)==false){
            name.addClass('error');
            nameInfo.text('Only letters are allowed');
            nameInfo.addClass('error');
            return false;
        }else{
            name.removeClass('error');
            nameInfo.text('');
            nameInfo.removeClass('error');
            return true;
        }
    }
    function validateEmail()
    {
        if(email.val()=='')
        {
            email.addClass('error');
            emailInfo.text('Please fill in your Valid Email');
            emailInfo.addClass('error');
            return false;
        }else if(mail.test(email)==false){
            email.addClass('error');
            emailInfo.text('Invalid Email');
            emailInfo.addClass('error');
            return false;
        }else{
            email.removeClass('error');
            emailInfo.removeClass('error');
            return true;
        }
    }
    function validatePhone()
    {
        if(phone.val()=='')
        {
            phone.addClass('error');
            phoneInfo.text('Please fill in your Phone number');
            phoneInfo.addClass('error');
            return false;
        }else if(isNaN(phone)){
            phone.addClass('error');
            phoneInfo.text('Please fill in your Phone number');
            phoneInfo.addClass('error');
            return false;
        }else{
            phone.removeClass('error');
            phoneInfo.removeClass('error');
            return true;
        }
    }
    function validateMsg(){
        if(msg.val()=='')
        {
            msg.addClass('error');
            msgInfo.text('Please enter your Message');
            msgInfo.addClass('error');
            return false;
        }else if(msg.val().length<10){
            msg.addClass('error');
            msgInfo.text('Please enter at least 10 words');
            msgInfo.addClass('error');
            return false;
        }else{
            msg.removeClass('error');
            msgInfo.removeClass('error');
            return true;
        }
    }

    /*name.blur(validateName);
    email.blur(validateEmail);
    phone.blur(validatePhone);
    msg.blur(validateMsg);*/

    name.keyup(validateName);
    email.keyup(validateEmail);
    phone.keyup(validatePhone);
    msg.keyup(validateMsg);

    form.submit(function(){
        if(validateName() ,validateEmail() , validatePhone(), validateMsg() ){
            return true;
        }else{
            return false;
        }
    })
})

和php表单代码是：

<form name="contactus"  id="contactus" action="" method="post">
        <ul class="form_field">
            <li><label>Your Name :</label>
                <input class="form_input" type="text" name="name" id="name" value="<?php echo $_POST['name'];?>" />
                <span id="nameInfo"></span>
            </li>
            <li><label>Email Address :</label>
                <input class="form_input" type="text" name="email" id="email" value="<?php echo $_POST['email'];?>" />
                <span id="emailInfo"></span>
            </li>
            <li><label>Phone Number :</label>
                <input class="form_input" type="text" name="phone" id="phone" value="<?php echo $_POST['phone'];?>" />
                <span id="phoneInfo"></span>
            </li>
            <li><label>Your Message:</label>
                <textarea class="form_input" name="message" id="message"><?php echo $_POST['message'];?></textarea>
                <span id="messageInfo"></span>
            </li>
            <li><?php echo recaptcha(); ?></li>
            <li><label>&nbsp;</label><input type="submit" class="submit_btn" value="Submit"  name="submit"/></li>
        </ul>
    </form>

问题是第二个条件没有正确验证任何表单元素。虽然null条件成功但第二个条件不成功。我做错了。欢迎任何帮助/建议。非常感谢。

2 个答案:

答案 0 :(得分：0)

  

我不想在我的名字和有效的电子邮件问题中使用数字字符   我希望abc_xyz@xxx.com作为有效的电子邮件，而不是像   abc@xyz_xxx.co或类似的东西

var reg=/^[a-zA-Z]+$/;
var mail=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{3}$/;

同时将您的功能修改为

function validateName()
{
    var val=name.val();
    if(!reg.test(val))
    {
        if(val.length > 0) nameInfo.text('Only letters are allowed');
        else nameInfo.text('Please fill up your full Name');
        name.addClass('error');
        nameInfo.addClass('error');
        return false;
    }
    else
    {
        name.removeClass('error');
        nameInfo.text('');
        nameInfo.removeClass('error');
        return true;
    }
}

function validateEmail()
{
    var val=email.val();
    if(!mail.test(val))
    {
        if(val.length > 0) emailInfo.text('Invalid Email');
        else emailInfo.text('Please fill in your Valid Email');
        email.addClass('error');
        emailInfo.addClass('error');
        return false;
    }
    else
    {
        email.removeClass('error');
        emailInfo.removeClass('error');
        return true;
    }
}

同样在您的validatePhone() function更改

中 
else if(isNaN(phone));

到

else if(isNaN(phone.val()));

Here is a test of regular Expression

答案 1 :(得分：0)

我的问题的正确代码：

    $(function(){

    var form = $('#contactus');
    var name = $('#name');
    var nameInfo = $('#nameInfo');
    var email = $('#email'); 
    var emailInfo = $('#emailInfo');
    var phone = $('#phone');
    var phoneInfo = $('#phoneInfo');
    var msg = $('#message');
    var msgInfo = $('#messageInfo');
    var reg=/^[a-zA-Z. ]+$/;
    var mail=/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 





    function validateName()
    { 
        if(name.val()=='')
        {
            name.addClass('error');
            nameInfo.text('Please fill up your full Name');
            nameInfo.addClass('error');
            return false;
        }else if(!reg.test(name.val())){
            name.addClass('error');
            nameInfo.text('Only letters are allowed');
            nameInfo.addClass('error');
            return false;
        }else{
            name.removeClass('error');
            nameInfo.text('');
            nameInfo.removeClass('error');
            return true;
        }
    }
    function validateEmail()
    { 
        if(email.val()=='')
        {
            email.addClass('error');
            emailInfo.text('Please fill in your Valid Email');
            emailInfo.addClass('error');
            return false;
        }else if(!mail.test(email.val())){
            email.addClass('error');
            emailInfo.text('Invalid Email');
            emailInfo.addClass('error');
            return false;
        }else{
            email.removeClass('error');
            emailInfo.text("");
            emailInfo.removeClass('error');
            return true;
        }
    }
    function validatePhone()
    { 
        if(phone.val()=='')
        {
            phone.addClass('error');
            phoneInfo.text('Please fill in your Phone number');
            phoneInfo.addClass('error');
            return false;
        }else if(isNaN(phone.val())){
            phone.addClass('error');
            phoneInfo.text('Please fill in your correct number');
            phoneInfo.addClass('error');
            return false;
        }else{
            phone.removeClass('error');
            phoneInfo.text("");
            phoneInfo.removeClass('error');
            return true;
        }
    }
    function validateMsg(){
        if(msg.val()=='')
        {
            msg.addClass('error');
            msgInfo.text('Please enter your Message');
            msgInfo.addClass('error');
            return false;
        }else if(msg.val().length<10){
            msg.addClass('error');
            msgInfo.text('Please enter at least 10 words');
            msgInfo.addClass('error');
            return false;
        }else{
            msg.removeClass('error');
            msgInfo.text("");
            msgInfo.removeClass('error');
            return true;
        }
    }

    name.blur(validateName);
    email.blur(validateEmail);
    phone.blur(validatePhone);
    msg.blur(validateMsg);

    name.keyup(validateName);
    email.keyup(validateEmail);
    phone.keyup(validatePhone);
    msg.keyup(validateMsg);

    form.submit(function(){
        if(validateName() ,validateEmail() , validatePhone(), validateMsg() ){
            return true;
        }else{
            return false;
        }
    })
})
相关问题
最新问题