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的表单验证

回答

相关问题