validate表单验证功能

    引入的文件

<script src="../Script/jquery-3.2.1.js"></script>
    <script src="../Script/Vialidate/lib/jquery.js"></script>
    <script src="../Script/Vialidate/dist/jquery.validate.js"></script>

//中文提示文件
    <script src="../Script/Vialidate/dist/localization/messages_zh.js"></script>

表单

<form id="signupForm">
            <table id="UserRegister">
                <tr>
                    <td>&nbsp;</td>
                    <td>
                        <div>
                            <table>
                                <tr>
                                    <td>
                                        <p>注册新帐户方便又容易</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>用户名</td>
                                    <td>
                                        <input type="text" name="txtName" id="txtUserName" placeholder="请输入用户名" class="required" /><!--<span id="UserNameMsg" style="font-size: 14px; color: red; ">*必填 长度大于4小于20</span>-->
                                    </td>
                                </tr>
                                <tr>
                                    <td>真实姓名：</td>
                                    <td>
                                        <input type="text" name="txtRealName" id="txtRealName" placeholder="请输入真实姓名" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>密码：</td>
                                    <td>
                                        <input type="password" name="txtPwd" id="txtPwd" placeholder="请输入密码" required="required" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>确认密码：</td>
                                    <td>
                                        <input type="password" name="txtConfirmPwd" id="txtConfirmPwd" placeholder="请再次输入密码" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>Email：</td>
                                    <td>
                                        <input type="text" name="txtEmail" id="txtEmail" placeholder="请输入Email" /><span id="msg" style="font-size: 14px; color: red"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>地址：</td>
                                    <td>
                                        <input type="text" name="txtAddress" id="txtAddress" placeholder="请输入地址" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>手机：</td>
                                    <td>
                                        <input type="text" name="txtPhone" id="txtPhone" placeholder="请输入手机号" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>验证码图片：</td>
                                    <td>
                                        <img id="valiCode" src="../Ashx/CreateValidate.ashx" alt="验证码" style="cursor: alias" width="100" height="40"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>验证码：</td>
                                    <td>
                                        <input type="text" name="txtCode" id="validateCode" placeholder="请输入验证码" />
                                    </td>


                                </tr>
                                <tr>
                                    <td>
                                        <input type="button" value="注册" id="btnRegister"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>&nbsp;</td>
                                </tr>
                            </table>
                            <div>---------------------------------------------------------</div>
                        </div>
                    </td>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </form>

验证

验证 rules:{

//控件的name属性的值：validate提供的方法

name:method

},messages{

//控件的name属性的值：你要提示的信息

name:message

}

<script type="text/javascript">


        $(function () {

            //验证表单输入是否正确
            CkeckFormIsTrue();
            //实现点击验证码图片自动改变验证码
            ChangeViladate();
            //注册按钮的点击事件
            RegisterClickEvent();
        });
        //注册按钮的点击事件
        function RegisterClickEvent() {   
            $("#btnRegister").click(function () {
                //表单验证完成，内容全部正确
                var cb = $("#signupForm").validate().form();
                if (cb) {
                    $.ajax({
                        url: "/Ashx/RegisterUser.ashx",
                        data: $("#signupForm").serialize(),
                        dataType: "json",
                        success: function (data) {
                            if (data == "ok") {
                                alert("注册成功！");
                            }
                        }
                    });
                } else {
                    alert("请填写正确的信息");
                }
            });
        }


        //实现点击验证码图片自动改变验证码
        function ChangeViladate() {
            $("#valiCode").click(function () {
                $(this).attr("src", "../Ashx/CreateValidate.ashx?" + Math.random(1));
            });
        }
        //验证表单输入是否正确
        function CkeckFormIsTrue() {
            $("#signupForm")
               .validate({
                   rules: {
                       txtName: {
                           required: true,
                           minlength: 4,
                           maxlength: 20,
                           //验证当前用户名是否存在 存在返回false 不存在返回true  
                           remote: {
                               url: "/Ashx/CheckUserIsExists.ashx",
                               type: "post",
                               dataType: "json",
                               data: {
                                   id: function () {
                                       return $("#txtUserName").val();
                                   }
                               }
                           }
                       },
                       txtRealName: "required",
                       txtPwd: {
                           required: true,
                           minlength: 4,
                           maxlength: 20
                       },
                       txtConfirmPwd: {
                           required: true,
                           minlength: 4,
                           maxlength: 20,
                           equalTo: "#txtPwd"
                       },
                       txtEmail: {
                           required: true,
                           email: true
                       },
                       txtAddress: "required",
                       txtPhone: "required",
                       txtCode: {
                           required: true,
                           remote: {
                               url: "/Ashx/CheckValidateIsTrue.ashx",
                               type: "post",
                               dataType: "json",
                               data: {
                                   validateCode: function () {
                                       return $("#validateCode").val();
                                   }
                               }
                           }
                       }
                   },
                   messages: {
                       txtName: {
                           required: "请输入用户名",
                           minlength: "用户名至少为4位",
                           maxlength: "用户名最多为20位",
                           remote: "用户名已存在"
                       },
                       txtRealName: "请填写真实姓名",
                       txtPwd: {
                           required: "请输入密码",
                           minlength: "密码至少为4位",
                           maxlength: "密码最多为20位"
                       },
                       txtConfirmPwd: {
                           required: "请输入密码",
                           minlength: "密码至少为4位",
                           maxlength: "密码最多为20位",
                           equalTo: "两次密码输入不一致"
                       },
                       txtEmail: {
                           required: "请输入邮箱",
                           email: "请输入一个正确的邮箱"
                       },
                       txtAddress: "请填写地址",
                       txtPhone: "请填写电话",
                       txtCode: {
                           required: "验证码不能为空",
                           remote: "验证码不正确"
                       }
                   }
               });
        }
    </script>