Question

<!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-\.]+@([\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表单验证代码...这里只显示错误信息的错误信息..如果我输入错误的用户名和手机号码，它应该显示错误信息....如何添加那格局？

Answer 1

正如我在评论中提到的那样，你应该在输入的方式上应用你的模式。试试这个：

＆＃13;

        $(document).ready(function(){
            $("#submit").click(function(){
                 var usernameReg=/^[a-zA-Z ]$/;
                 var mobnumReg=/^[0-9]$/;
                 var emailReg=/^([\w-\.]+@([\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;
                }
            }); });

＆＃13;

<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>

＆＃13;

注意您可能希望改进错误消息。 missing name已经不够了。你应该说：either missing name or wrong pattern。

Answer 2

@Shafizadeh修好了你的代码。只是一句话：您也可以单独使用HTML进行验证。必填字段：

<input name="username" required>

匹配模式的字段：

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

现在基本上所有现代浏览器都支持这些功能。但是，如果您需要某种程度的互操作性，我已经编写了一个库Hyperform，它确保这些属性可以像IE 10一样工作。

使用正则表达式进行jquery表单验证

2 个答案: