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

最新推荐文章于 2025-06-27 16:20:44 发布

原创最新推荐文章于 2025-06-27 16:20:44 发布 · 1.5w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #textbox #class #server #asp #正则表达式

javascript & jquery 专栏收录该内容

25 篇文章

订阅专栏

本文介绍如何利用jQuery Validate插件创建一个强密码验证规则，确保用户在修改密码时，新密码至少包含一个大写字母、一个小写字母和一个特殊字符。

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

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

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>