关于使用jQuery.validate验证表单中两次密码是不是一致的问题

Posted 2023-05-15

$("#aspnetForm").validate(
rules:
txtName:
required: true
,
txtTrueName:
required: true
,
txtPass:
required: true,
minlength: 3
,
txtTwoPass:
required: true,
minlength: 3,
equalTo: "#txtPass"
,
txtEmail:
required: true,
email: true
,
txtAddress:
required: true
,
txtPhone:
required: true

,
messages:
txtName:
required: "*请输入用户名"
,
txtTrueName:
required: "*请输入姓名"
,
txtPass:
required: "*请输入密码",
minlength: "*密码不能小于3个字符"
,
txtTwoPass:
required: "*请输入确认密码",
minlength: "*密码不能小于3个字符",
equalTo: "*请再次输入相同的值"
,
txtEmail:
required: "*请输入邮箱",
email: "*请输入正确的邮箱格式"
,
txtAddress:
required: "*请输入地址"
,
txtPhone:
required: "*请输入手机号码"


);

为什么明明我输入的两次密码是一致的还一直提示我呢？

参考技术A 光看jq是没有问题的。

这种情况都是去查看html页面的两个password型是否都赋值id了。
或者检索下页面是否存在两个txtPass的id。

或者你先将equalTo去掉，在重新验证下，看看是否有存在其他错误，没有在倒回来排查这个地方。本回答被提问者和网友采纳 参考技术B <!--密码-->
<input type="password" value="" name="userpassword" datatype="*6-15" errormsg="密码范围在6~15位之间,不能使用空格！" />
<!--确认密码-->
<input type="password" value="" name="userpassword2" datatype="*" recheck="userpassword" errormsg="您两次输入的账号密码不一致！" />

jq中的表单验证插件------jquery.validate

 

 

今天我们来说一下表单验证，有人说我们在进行表单验证的时候使用正则来验证是非常麻烦的，现在我来给大家介绍一下表单验证的插件：jquery.validate.min.js

它是与jquery一起结合用来使用的，使用它是非常方便，只需写校验规则和错误字段即可。

我们常见的校验规则有以下几种：

(1)required:true               必输字段
(2)email:true                  必须输入正确格式的电子邮件
(3)date:true                   必须输入正确格式的日期
(4)dateISO:true                必须输入正确格式的日期(ISO)
(5)digits:true                 必须输入整数
(6)equalTo:"#pass"           输入值必须和#pass相同
(7)maxlength:5                输入长度最多是5的字符串
(8)minlength:10               输入长度最小是10的字符串
(9)rangelength:[5,10]         输入长度必须介于 5 和 10 之间
(10)range:[5,10]               输入值必须介于 5 和 10 之间
(11)max:5                      输入值不能大于5
(12)min:10                     输入值不能小于10

然后接着写提示字段就可以了，不过可以不写，因为它有英文的提示字段，下面就来请大家看一下以下代码：

我们在使用插件之前必不可缺的是要引入jquery文件 和插件

<script src="jquery-1.9.1.js"></script>
<script src="jquery.validate.min.js"></script>
然后就来看一下html代码

<form action="" id="mgForm">  //写表单验证比不缺少的是我们的form标签
    <div>  //关于用户名的布局
        <label for="user">username:</label>
        <input type="text" name="username" id="user">
    </div>

    <div>//关于密码的布局

        <label for="pass">password:</label>
        <input type="text" name="password" id="pass">
    </div>
    <div>//重置密码
        <label for="pass1">form-password:</label>
        <input type="text" name="password1" id="pass1">
    </div>
    <div>//年龄
        <label for="age">age:</label>
        <input type="text" name="age" id="age">
    </div>
    <div>//email
        <label for="email">email:</label>
        <input type="text" name="email" id="email">
    </div>
    <input type="submit" value="提交">  //我们在提交数据时提交的按钮应该为submit类型的
</form>
接着再来看一下js代码 

       $(function () {
            $("#mgForm").validate({
                rules:{//写入文本框中的限制条件
                    username:{  //指的是input中name的名字
                        required:true,//不能为空
                        minlength:6,//最短为6个
                        maxlength:10//最长为10个
                    },
                    age:{
//                      range:[18,80] //年龄范围为18-80
                        required:true, //不能为空
                    },
                    password:{
                        required:true,//必填
                        rangelength:[2,6] //长度为2-6
                    },
                    password1:{
                       equalTo:"#pass" //重置密码必须与#pass中的密码保持一致
                    },
                    email:{
                        email:true  //email保证格式正确
                    }
                },
                messages:{//提示信息
                    username:{ //用户名
                        required:"*此项必填",
                        minlength:"*用户名最小是6位",
                        maxlength:"*用户名最大是10位"
                    },
                    age:{//年龄
                        range:"*年龄必须在18-80之间"
                        PostCode:"错误"
                    },
                    password:{//密码
                        required:"*必填",
                        rangelength:"2-6"
                    },
                    password1:{//重置密码
                        equalTo:"*密码不一致"
                    },
                    email:{//邮箱格式
                        email:"*邮箱格式不正确"
                    }
                },
                submitHanfler:function () {//如果全部验证正确就弹出弹窗
                    alert("全部通过")
                },
                errorClass:"wrong",//给错误字段添加wrong样式
                ignore:"#pass1",//忽略密码不一
                errorElement:"div",//错误信息单独显示一行
                focusInvalid:true,//提交表单后,未通过验证的表单(第一个或提交之 前获得焦点的未通过验证的表单)会获得焦点 
                focusCleanup:true,// 当未通过验证的元素获得焦点时,并移除错误提示
                highlight:function (element,errorClass) {//在信息错误时会出现一闪的效果
                    $(element).addClass(errorClass);
                    $(element).fadeOut().fadeIn()
                }
            });
                $.validator.addMethod("PostCode",function () {  //此外，我们还可自定义样式
                    var reg=/^[0-9]{6}$/;
                    return reg.test(value)
                },"邮编输入不正确");
            });

今天的表带验证插件你们学会了嘛？