jQuery的表單驗證

<!DOCTYPE html> 
     <html> 
     <head> 
      <link rel="stylesheet" type="text/css" href="style.css"> 
      <script type="text/javascript" src="jquery-3.1.1.min.js"></script> 
     <script> 
     $(document).ready(function(){ 
      $("#submit").click(function(){ 
       var usernameReg=/^[a-zA-Z ]$/; 
       var mobnumReg=/^[0-9]$/; 
       var emailReg=/^([\w-\.][email protected]([\w-]+\.)+[\w-]{2,4})?$/; 

       var errors=false; 
       if($('#username').val()==''){ 
        $('#username').after('<span class="errors">missing name</span>'); 
        errors=true; 
       } 
       if($('#mobnum').val()==''){ 
        $('#mobnum').after('<span class="errors">missing number</span>'); 
        errors=true; 
       } 
       if($('#mail').val()==''){ 
        $('#mail').after('<span class="errors">missing mail</span>'); 
        errors=true; 
       } 
       if($('#pwd').val()==''){ 
        $('#pwd').after('<span class="errors">missing password</span>'); 
        errors=true;  
       } 
       if($('#addr1').val()==''){ 
        $('#addr1').after('<span class="errors">missing address</span>'); 
        errors=true; 
       } 
       if($('#addr2').val()==''){ 
        $('#addr2').after('<span class="errors">missing address</span>'); 
        errors=true;  
       } 
       if(errors==true){ 
        return false; 
       }else{ 
        return true; 
       } 
      }); }); 

     </script>  
     </head> 
     <body> 

     <form method="post" id="user_form"> 

       NAME <br> 
       <input type="text" name="username" id="username" class="req" ><br> 
       MOBILE NUMBER <br> 
       <input type="text" name="mobnum" id="mobnum" class="req" maxlength="10"><br> 
       E-MAIL <br> 
       <input type="email" name="mail" id="mail" class="req" ><br>  
       PASSWORD <br> 
       <input type="password" name="pwd" id="pwd" class="req" ><br>  
       ADDRESS 1<br> 
       <input type="text" name="addr1" id="addr1" class="req" ><br> 
       ADDRESS 2<br> 
       <input type="text" name="addr2" id="addr2" class="req" ><br> 
       <button type="submit" id="submit">Submit</button> 

     </form> 
     </body> 
     </html>

與正則表達式的jQuery表單驗證您好..我已經寫代碼...這裏的錯誤消息只對不正確email..if顯示我輸入不正確的用戶名和手機號碼，它應該顯示錯誤消息....如何添加模式？jQuery的表單驗證

來源

2016-12-15 moksha

您用於驗證的方式不太好，我會推薦你使用Jquery驗證插件。 –

我正在嘗試不使用插件 – moksha

好。但是，如果插件可用，則可以寫入多少次if ... else會阻止並執行手動操作。 –

正如我在評論中提到的，你應該在輸入方式上應用你的模式。試試這個：

 $(document).ready(function(){ 
 
      $("#submit").click(function(){ 
 
       var usernameReg=/^[a-zA-Z ]$/; 
 
       var mobnumReg=/^[0-9]$/; 
 
       var emailReg=/^([\w-\.][email protected]([\w-]+\.)+[\w-]{2,4})?$/; 
 
       var username = $('#username').val(), 
 
        mobnum = $('#mobnum').val(), 
 
        mail = $('#mail').val(); 
 

 
       var errors=false; 
 
       if(username == '' || !usernameReg.test(username)){ 
 
        $('#username').after('<span class="errors">missing name</span>'); 
 
        errors=true; 
 
       } 
 
       if(mobnum == '' || !mobnumReg.test(mobnum)){ 
 
        $('#mobnum').after('<span class="errors">missing number</span>'); 
 
        errors=true; 
 
       } 
 
       if(mail == '' || !emailReg.test(mail)){ 
 
        $('#mail').after('<span class="errors">missing mail</span>'); 
 
        errors=true; 
 
       } 
 
       if($('#pwd').val()==''){ 
 
        $('#pwd').after('<span class="errors">missing password</span>'); 
 
        errors=true;  
 
       } 
 
       if($('#addr1').val()==''){ 
 
        $('#addr1').after('<span class="errors">missing address</span>'); 
 
        errors=true; 
 
       } 
 
       if($('#addr2').val()==''){ 
 
        $('#addr2').after('<span class="errors">missing address</span>'); 
 
        errors=true;  
 
       } 
 
       if(errors==true){ 
 
        return false; 
 
       }else{ 
 
        return true; 
 
       } 
 
      }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="style.css"> 
 
     <form method="post" id="user_form"> 
 

 
       NAME <br> 
 
       <input type="text" name="username" id="username" class="req" ><br> 
 
       MOBILE NUMBER <br> 
 
       <input type="text" name="mobnum" id="mobnum" class="req" maxlength="10"><br> 
 
       E-MAIL <br> 
 
       <input type="email" name="mail" id="mail" class="req" ><br>  
 
       PASSWORD <br> 
 
       <input type="password" name="pwd" id="pwd" class="req" ><br>  
 
       ADDRESS 1<br> 
 
       <input type="text" name="addr1" id="addr1" class="req" ><br> 
 
       ADDRESS 2<br> 
 
       <input type="text" name="addr2" id="addr2" class="req" ><br> 
 
       <button type="submit" id="submit">Submit</button> 
 

 
     </form>

注意到你可能想提高你的錯誤消息。 missing name已經不夠了。你應該說：either missing name or wrong pattern。

來源

2016-12-15 13:01:40 Shafizadeh

@Shafizadeh修復你的代碼就好了。只是一句話：你也可以單獨使用HTML來進行驗證。必填字段：

<input name="username" required>

領域與模式匹配：

<input name="mobnum" type="tel" pattern="[0-9]+">

基本上所有的現代瀏覽器做時下支持這些功能。但是，如果您需要一定程度的互操作性，我已經編寫了一個庫，Hyperform，確保這些屬性的工作早於IE 10.

來源

2016-12-15 13:11:29 Boldewyn

好點..！ ['pattern']（http://www.w3schools.com/tags/att_input_pattern.asp）是HTML5中的一大特性。我喜歡';-)' – Shafizadeh

jQuery的表單驗證

回答

相關問題