• jQuery.validator.addMethod自定义方法密码验证补充


    用jQuery的插件密码校验:

    html和js代码:

    <!DOCTYPE html>
    <html lang="zh" xmlns:th="http://www.thymeleaf.org" >
    <head>
        <th:block th:include="include :: header('修改用户密码')" />
        <th:block th:include="include :: select2-css" />
        <meta charset="UTF-8">
    </head>
    <body class="white-bg">
        <div class="wrapper wrapper-content animated fadeInRight ibox-content">
            <form class="form-horizontal m" id="form-user-resetPwd">
                <input name="userId"  type="hidden"  th:value="${user.userId}" />
                <div class="form-group">
                    <label class="col-sm-3 control-label">登录名称:</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" readonly="true" name="loginName" th:value="${user.loginName}"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">旧密码:</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="password" name="oldPassword" id="oldPassword">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">新密码:</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="password"   name="newPassword" id="newPassword" placeholder="请输入请密码"     required>
    
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">再次确认:</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="password" name="confirm" id="confirm" placeholder="请再次输入您的密码"   >
                        <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请再次输入您的密码</span>
                    </div>
                </div>
            </form>
        </div>
        <th:block th:include="include :: footer" />
        <th:block th:include="include :: select2-js" />
    
        <script>
    
            $("#form-user-resetPwd").validate({
                rules:{
                    oldPassword:{
                        required:true,
                        remote: {
                            url: ctx + "system/user/profile/checkPassword",
                            type: "get",
                            dataType: "json",
                            data: {
                                password: function() {
                                    return $("input[name='oldPassword']").val();
                                }
                            }
                        }
                    },
                    newPassword: {
                        required: true,
                        minlength: 8,
                        maxlength: 20,
                        checkpassword: true
                    },
                    confirm: {
                        required: true,
                        equalTo: "#newPassword",
                        checkpassword: true
    
                    }
                },
                messages: {
                    oldPassword: {
                        required: "请输入原密码",
                        remote: "原密码错误"
    
                    },
                    newPassword: {
                        required: "请输入新密码",
                        minlength: "密码不能小于8位",
                        maxlength: "密码不能大于20位"
                    },
                    confirm: {
                        required: "请再次输入新密码",
                        equalTo: "两次密码输入不一致"
                    }
    
                },
                focusCleanup: true
            });
    /**
    addMethod(name,method,message)方法,参数 name 是添加的方法的名字。参数 method 是一个函数,接收三个参数 (value,element,param) 。value
    是元素的值,element 是元素本身,param 是参数。
    */     
            jQuery.validator.addMethod("checkpassword", function(value, element) {
                var Password = /^(?=.*[A-Za-z])(?=.*[!@#$&*])(?=.*[0-9]).{8,20}$/;
                return this.optional(element) || (Password.test(value));
            }, "请输入8-20位字符,至少包含数字/大写字母/小写字母/特殊符号中的三项");
    
            function submitHandler() {
                if ($.validate.form()) {
                    $.operate.save(ctx + "system/user/profile/resetPwd", $('#form-user-resetPwd').serialize());
                }
            }
        </script>
    </body>
    
    </html>
  • 相关阅读:
    测试杯子
    如何测试网页的登录页面
    功能性测试之边界值测试
    自动化 sample
    软件架构---敏捷和架构的关系
    软件架构---分布式后端架构应该考虑的一些方面
    软件架构---集群与负载均衡
    软件架构---从需求明确架构设计驱动力
    软件架构---质量属性的实现
    软件架构---质量属性(二)
  • 原文地址:https://www.cnblogs.com/liqinzhen/p/13177175.html
Copyright © 2020-2023  润新知