表单验证无法正常工作

问题描述：

我使用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>

问题是第二条件不为任何形式的元件的适当的验证。虽然零条件成功，但第二条件不成立。我是否做错了任何帮助/建议是值得欢迎的。非常感谢。

'VAR REG =/^ [A-ZA-Z。 ] + $ /;'应该是'var reg =/^ [a-zA-Z] + $ /;' – 2012-07-16 10:14:24

hab已经试过了..但是无济于事...... :( – 2012-07-16 10:59:19

你看到控制台上有错误吗？ – 2012-07-16 11:02:09

答

我不想数字字符在我的名字，并作为有效的电子邮件问题我想[email protected]为有效的电子邮件，而不是像 [email protected]_xxx.co或类似的东西

var reg=/^[a-zA-Z]+$/; 
var mail=/^[a-zA-Z0-9._-][email protected][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。我的问题

谢谢@谢赫Heera ....得到它现在一切正常，但我仍然困惑为什么我以前的代码不起作用。你可以让我清楚，是“！val.test（reg）”返回错误，因为val.test不是一个函数，并纠正它，我用“！reg.test（val）”。有效。所以我很困惑为什么你的代码不适合我。你有任何想法和感谢谢谢你的解决方案。 – 2012-07-18 05:09:58

您使'reg.test（name）'名称出现的一个常见错误是输入框的引用，该输入框是对象，但不是该输入框的值。 – 2012-07-18 08:41:13

哦，这么简单的一个错误，我没有得到它。谢谢你，谢赫赫拉 – 2012-07-18 09:00:08

答

正确的代码：

$(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; 
     } 
    }) 
})

表单验证无法正常工作

相关推荐