zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Get-CrmSetting返回Unable to connect to the remote server的解决办法
    Dynamics 365中的常用Associate和Disassociate消息汇总
    Dynamics 365 Customer Engagement V9 活动源功能报错的解决方法
    Dynamics Customer Engagement V9版本配置面向Internet的部署时候下一步按钮不可点击的解决办法
    Dynamics 365检查工作流、SDK插件步骤是否选中运行成功后自动删除系统作业记录
    注意,更改团队所属业务部门用Update消息无效!
    Dynamics 365的审核日志分区删除超时报错怎么办?
    Dynamics 365使用Execute Multiple Request删除系统作业实体记录
    Dynamics 365的系统作业实体记录增长太快怎么回事?
    Dynamics CRM日期字段查询使用时分秒的方法
  • 原文地址:https://www.cnblogs.com/liqinzhen/p/13177175.html
Copyright © 2011-2022 走看看