表單驗證無法正常工作

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

問題是第二條件不爲任何形式的元件的適當的驗證。雖然零條件成功，但第二條件不成立。我是否做錯了任何幫助/建議是值得歡迎的。非常感謝。

來源

2012-07-16 samjhana joshi

'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。我的問題

來源

2012-07-17 09:47:36

謝謝@謝赫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; 
     } 
    }) 
})

來源

2012-07-18 05:10:45

表單驗證無法正常工作

回答

相關問題