用jquery validate插件实现强密码验证

时间:2021-12-29 08:49:51

用户修改密码时,新密码必须至少一个大写字母、一个小写字母及一个符号组成,实现强制强密码。

javascript代码:

$(function() {


            $("#form1").validate({
                rules: {
                    txbOldPwd: 'required',
                    txbNewPwd1:
                {
                    required: true,
                    regexPassword: true,
                    same:true
                },
                    txbNewPwd2: { required: true, rangelength: [8, 15], equalTo: "#txbNewPwd1" }


                },




                messages: {
                    txbOldPwd: '请输入老密码',
                    txbNewPwd1:
                {
                    required: '请输入新密码',
                    regexPassword: '密码至少包一个大写字母、一个小写字母及一个符号,长度至少8位',
                    same:'新密码不能与老密码一样'
                },
                    txbNewPwd2: {
                        required: "请输入确认密码",
                        rangelength: "确认密码不能小于8个字符",
                        equalTo: "两次输入密码不一致"
                    }


                },


                errorElement: "em", //可以用其他标签,记住把样式也对应修改
                success: function(label) {
                    //label指向上面那个错误提示信息标签em
                    label.text(" ")				//清空错误提示消息
				.addClass("success"); //加上自定义的success类
                }


            });


            jQuery.validator.addMethod("same", function(value, element) {
                return this.optional(element) || same(value);
            }, "新密码不能与老密码重复");


            function same(pwd) {
                var oldPwd = $("#txbOldPwd").val();
                if (oldPwd == pwd)
                    return false;
                else
                    return true;
            }

            
// 密码验证正则表达式
jQuery.validator.addMethod("regexPassword", function(value, element) {
    return this.optional(element) || /^(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/.test(value);
}, "一个大写,一个小写,一个符号");



        })
    
 


aspx

<form id="form1" runat="server">
    <div style="text-align:center" >
        <div class="Body_Title">用户管理 >> 修改密码</div>
        <div  class="kuang">        
            <table style="line-height:40px">
                <tr>
                    <td class="tdLeft" width=30%>老密码:</td>
                    <td class=tdRight>
                        <asp:TextBox ID="txbOldPwd" runat="server" Width=180px title="输入旧密码" TextMode="Password" 
                            ></asp:TextBox><em>*</em>
                    </td>
                </tr>
                <tr>
                    <td class="tdLeft">新密码:</td>
                    <td class=tdRight>
                        <asp:TextBox ID="txbNewPwd1" runat="server" Width=180px title="输入新密码" 
                            TextMode="Password"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="tdLeft">新密码确认:</td>
                    <td class=tdRight>
                        <asp:TextBox ID="txbNewPwd2" runat="server" Width=180px title="新密码确认" 
                            TextMode="Password"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td style="line-height:40px; text-align:center" colspan="2">
                        <asp:Button ID="Button1" runat="server" Text="修   改" CssClass="btn" />
                    </td>
                </tr>
            </table>
        </div>
    </div>
    </form>