jQuery表单校验

爱豆技术部 2022-05-18 原文

jQuery表单校验

              <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script src="jquery.min.js"></script>
            <script>
                function checkUsername(){
                    // 除了数字之外的任何字符\D{6,}；可以输入至少6位；^开始标志，$结束标志
                    // 将这个规则赋值给reg
                    var reg =/^\D\S{6,}$/;
                    //val获取输入的字符 $(“#id“).val()
                    var username = $("#user").val();
                    //reg.test(username)字符调用规则；会返回true或false
                    if(reg.test(username)){
                        $("#usertip").html("<font color='green'>OK</font>");
                        return true;
                        }
                            $("#usertip").html("<font color='red'>格式必须是至少六位的非数字</font>");
                            return false;
                }
                function checkPassword(){
                var reg =/^\d\S{5,}$/;
                //val获取输入的字符 $(“#id“).val()
                var pwd = $("#pwd").val();
                //reg.test(pwd)字符调用规则；会返回true或false
                if(reg.test(pwd)){
                    $("#pwdtip").html("<font color='green'>OK</font>");
                    return true;
                    }
                        $("#pwdtip").html("<font color='red'>格式必须是至少六位的非数字</font>");
                        return false;
                }
                function checkRepwd(){
                    var reg =/^\d\S{5,}$/;
                    //val获取输入的字符 $(“#id“).val()
                    var repwd = $("#repwd").val();
                    var pwd = $("#pwd").val();
                    //reg.test(pwd)字符调用规则；会返回true或false

                    if(reg.test(repwd)&&repwd==pwd){
                        $("#repwdtip").html("<font color='green'>OK</font>");
                        return true;
                        }
                            $("#repwdtip").html("<font color='red'>格式必须是至少六位的非数字</font>");
                            return false;
                }
                function checkEmail(){

                    var email= $("#email").val();
                    var	reg = /^\w{6,}@[0-9A-Za-z]{2,}(\.[a-zA-Z]{2,3}){1,2}$/; 
                    if(reg.test(email)){
                            $("#emailtip").html("<font color='green'>OK</font>");
                            return true;
                            }
                                $("#emailtip").html("<font color='red'>邮箱格式有误</font>");
                                return false;
                    }
                function checkForm(){
                    return checkUsername()&&checkPassword()&&checkRepwd()&&checkEmail();
                }
            </script>
        </head>
        <body>
            <!--  onsubmit="return checkForm()"--checkForm()当返回值为true则执行提交-->
            <table id="center" border="0" cellspacing="0" cellpadding="0">
            <form action="http://www.baidu.com" method="get" onsubmit="return checkForm()">
                    <tr>
                            <td>您的姓名：</td>
                            <td>		
                            <!-- onblur当用户鼠标离开输入框会执行，触发的方法 -->
                                    <input id="user" type="text" name="username" onblur="checkUsername()"/>
                                    <!--  style="display: inline;"多个div显示在一行 -->
                                    <div id="usertip" style="display: inline;"></div>
                            </td>
                    </tr>
                    <tr>
                            <td>输入密码：</td>
                            <td>
                                    <input id="pwd" type="password" onblur="checkPassword()"/>
                                    <div id="pwdtip" style="display: inline;"></div>
                            </td>
                    </tr>
                    <tr>
                            <td>再输入一遍密码：</td>
                            <td>
                                    <input id="repwd" type="password" onblur="checkRepwd()"/>
                                    <div id="repwdtip" style="display: inline;"></div>
                            </td>
                    </tr>
                    <tr>
                            <td>您的Email：</td>
                            <td>
                                    <input id="email" type="email" onblur="checkEmail()"/>
                                    <span id="emailtip"></span>
                            </td>
                    </tr>
                    <tr>

                            <td colspan="2">
                                    <input type="submit" value="注册" class="rb1" />
                            </td>
                    </tr>
            </form>
            </table>
        </body>
    </html>