jquery使用 validate 插件进行验证是否通过_jquery validate表单校验如果判断某个输入框是否通过校验-优快云博客

本文介绍了如何在jQuery中利用validate插件对表单进行验证，包括基本用法、自定义规则和错误提示的设置，帮助开发者实现高效且用户体验良好的表单验证功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 $("#FindPsw").validate({
                //onsubmit:true,// 是否在提交是验证
                //onfocusout:false,// 是否在获取焦点时验证
                //onkeyup :false,// 是否在敲击键盘时验证
                rules:{      //规则
                    txtTel:{//要对应相对应的input中的name,属性
                        required: true
                    },
                    txtPsd:{
                        required: true
                    },
                    txtPsd2:{
                        required: true
                    },
                },
                messages:{　　　　//验证错误信息
                    txtTel: {
                        required: "*请输入手机号码"
                    },

                    txtPsd: {
                        required: "*请输入设置密码",
                        minlength: "密码长度不能小于 6-20个非空格字符"
                    },
                    txtPsd2: {
                        required: "*请输入确认密码",
                        minlength: "密码长度不能小于6-20个非空格字符",
                        equalTo: "两次密码输入不一致"
                    }
                },
                submitHandler: function (form) {//Jquery validate(submitHandler函数)验证通过发送Ajax
                    var txtPsd2 = $("[name=txtPsd2]").val();
                    var txtPsd = $("[name=txtPsd]").val();
                    var txtTel = $("[name=txtTel]").val();
                    if (txtPsd != txtPsd2)
                    {
                        alert("请输入相同的密码");
                        return;
                    }
                    $.post("/FindPsw/FindPsw", { txtTel: txtTel, txtPsd: txtPsd }, function (i) {
                        if (i["result"] != 1) {
                            alert(i["message"]);
                        }
                        else {
                            location.href = "/Login/Index";

                        }
                    });
                }
            }

submitHandler: function (form) {}  这里面验证完之后最主要是这样函数，这个函数是在验证成功之后进行调用 ajax 方法来进行前后端数据交互的

html的写法

<form method="post" action="" class="fl register_inner mobileForm" id="FindPsw">
                            <div class="mgnAuto">
                                <div class="text_box">
                                    <label for="">手机号 :</label>
                                    <input type="text" id="txtTel" name="txtTel" class="phone">
                                    <span class="tip-error"></span>

                                </div>
                                <div class="text_box mgTop12">
                                    <label for=""> 校验码 :</label>
                                    <input type="text" id="txtCode" name="txtCode" class="codeText">
                                    <a class="regCodeBtn" id="btn">60重新发送</a>
                                    <span class="tip-error"></span>
                                </div>
                                <div class="text_box mgTop12">
                                    <label for="">设置密码 :</label>
                                    <input type="password" id="txtPsd" name="txtPsd" placeholder="6-20个非空格字符 " class="phonePwd">
                                    <span class="tip-error"></span>
                                </div>
                                <div class="text_box">
                                    <label for="">确认密码 :</label>
                                    <input type="password" id="txtPsd2" name="txtPsd2" class="phonePwd">
                                    <span class="tip-error"></span>
                                </div>
                                <p></p>
                                <button type="submit" id="btnOk" class="regBtn colf textc font14 mgTop12">完 成</button>
                            </div>
                        </form>
                    </div>