潘钊 / bsth_control · Commits

Commit 7c9a059655c215661b3159ba694cdf986d12c364

Authored by 徐烜
1 parent 2176b3b9
build: skipped

使用passwordRulesHelper插件增加修改密码强度验证

Inline Side-by-side
Showing 6 changed files with 226 additions and 7 deletions
src/main/resources/static/assets/plugins/passwordRulesHelper/passwordRulesHelper.css 0 → 100644
  View file @7c9a059
  1 +div.rules-list
  2 +{
  3 +margin-top:10px;
  4 +}
  5 +
  6 +div.rules-list .rules
  7 +{
  8 + list-style-type:none;
  9 + padding:0;
  10 +}
  11 +
  12 +div.rules-list li
  13 + {
  14 + position:relative;
  15 + }
  16 +
  17 + div.rules-list li.ko::before
  18 + {
  19 + content:'\f00d';
  20 + font: normal normal normal 14px/1 FontAwesome;
  21 + width: 32px;
  22 + font-size: 14px;
  23 + display: inline-block;
  24 + text-align: right;
  25 + margin-right: 10px;
  26 + color:#F00;
  27 + }
  28 + div.rules-list li.ok::before
  29 + {
  30 + content:'\f00c';
  31 + font: normal normal normal 14px/1 FontAwesome;
  32 + width: 32px;
  33 + font-size: 14px;
  34 + display: inline-block;
  35 + text-align: right;
  36 + margin-right: 10px;
  37 + color:#008000;
  38 + }
  39 +
  40 +
0 \ No newline at end of file 41 \ No newline at end of file
src/main/resources/static/assets/plugins/passwordRulesHelper/passwordRulesHelper.js 0 → 100644
  View file @7c9a059
  1 +(function ($) {
  2 +
  3 + $.fn.passwordRulesValidator = function (aOptions) {
  4 +
  5 +
  6 + // Define default's parameters
  7 + var aDefauts =
  8 + {
  9 + 'rules' : {
  10 + 'length' : {
  11 + 'regex': '.{8,}',
  12 + 'name': 'length',
  13 + 'message': '8 characters',
  14 + 'enable': true
  15 + },
  16 + 'lowercase' :{
  17 + 'regex': '[a-z]{1,}',
  18 + 'name': 'lowercase',
  19 + 'message': '1 lowercase',
  20 + 'enable': true
  21 + },
  22 + 'uppercase' : {
  23 + 'regex': '[A-Z]{1,}',
  24 + 'name': 'uppercase',
  25 + 'message': '1 uppercase',
  26 + 'enable': true
  27 + },
  28 + 'number' : {
  29 + 'regex': '[0-9]{1,}',
  30 + 'name': 'number',
  31 + 'message': '1 digit',
  32 + 'enable': true
  33 + },
  34 + 'specialChar' : {
  35 + 'regex': '[^a-zA-Z0-9]{1,}',
  36 + 'name': 'special-char',
  37 + 'message': '1 special character',
  38 + 'enable': true
  39 + }
  40 + },
  41 + 'msgRules': 'Your password must contain :',
  42 + 'container': undefined,
  43 + 'containerClass': null,
  44 + 'containerId': 'checkRulesList',
  45 + 'okClass': null,
  46 + 'koClass': null,
  47 + 'onLoad': undefined
  48 + };
  49 +
  50 + /**
  51 + * @param {object} oRegex
  52 + * @param {string} sVal
  53 + * @param {string} sName
  54 + * @param {string} sIdContainer
  55 + */
  56 + function validateRule(oRegex, sVal, sName, sIdContainer)
  57 + {
  58 + if (oRegex.test(sVal)) {
  59 + $('#' + sIdContainer + ' li.' + sName).removeClass('ko ' + aParameters.koClass).addClass('ok ' + aParameters.okClass);
  60 + } else {
  61 + $('#' + sIdContainer + ' li.' + sName).removeClass('ok ' +aParameters.okClass).addClass('ko ' +aParameters.koClass);
  62 + }
  63 + }
  64 +
  65 + /**
  66 + * @param {array} aParemeters
  67 + * @param {string} sVal
  68 + * @param {string} sIdContainer
  69 + */
  70 + function checkRules(aParemeters, sVal, sIdContainer)
  71 + {
  72 + $.each(aParameters.rules, function(iKey, aRule) {
  73 + if(aRule.enable) {
  74 + validateRule(new RegExp(aRule.regex, 'g'), sVal, aRule.name, sIdContainer);
  75 + }
  76 + });
  77 +
  78 + }
  79 +
  80 + var aParameters = $.extend(true, aDefauts, aOptions);
  81 +
  82 + return this.each(function () {
  83 +
  84 + // Execute onLoad fonction
  85 + if ($.isFunction(aParameters.onLoad)) {
  86 + aParameters.onLoad();
  87 + }
  88 +
  89 + // Build rules check list
  90 + oRulesBuilder = '<span class="rules">' + aParameters.msgRules + '</span>';
  91 + oRulesBuilder += '<ul class="rules">';
  92 +
  93 + // Build lists
  94 + $.each(aParameters.rules, function(iKey, aRule) {
  95 + if(aRule.enable) {
  96 + oRulesBuilder += '<li class="ko ' + aParameters.koClass + ' '+ aRule.name +'">' + aRule.message + '</li>';
  97 + }
  98 + });
  99 +
  100 + oRulesBuilder += '</ul>';
  101 +
  102 + // Create or populate container
  103 + if (typeof (aParameters.container) === 'undefined') {
  104 + $(this).after('<div class="rules-list ' + aParameters.containerClass + '" id="' + aParameters.containerId + '"></div>');
  105 + $(oRulesBuilder).appendTo('#' + aParameters.containerId);
  106 + } else {
  107 + aParameters.container.addClass('rules-list');
  108 + $(oRulesBuilder).appendTo(aParameters.container);
  109 + }
  110 +
  111 + var sIdContainer = typeof (aParameters.container) === 'undefined' ? aParameters.containerId : aParameters.container.attr('id');
  112 +
  113 + // Execute checkRules on load
  114 + checkRules(aParameters, $(this).val(), sIdContainer);
  115 +
  116 + // Execute checkRules fonction
  117 + $(this).keyup(function () {
  118 + checkRules(aParameters, $(this).val(), sIdContainer);
  119 + });
  120 +
  121 + $(this).on('paste', function () {
  122 + checkRules(aParameters, $(this).val(), sIdContainer);
  123 + });
  124 +
  125 + $(this).change(function () {
  126 + checkRules(aParameters, $(this).val(), sIdContainer);
  127 + });
  128 + });
  129 + };
  130 +})(jQuery);
  131 +
  132 +
src/main/resources/static/assets/plugins/passwordRulesHelper/passwordRulesHelper.min.css 0 → 100644
  View file @7c9a059
  1 +div.rules-list li.ko::before,div.rules-list li.ok::before{width:32px;display:inline-block;text-align:right;margin-right:10px}div.rules-list{margin-top:10px}div.rules-list .rules{list-style-type:none;padding:0}div.rules-list li{position:relative}div.rules-list li.ko::before{content:'\f00d';font:normal normal normal 14px/1 FontAwesome;font-size:14px;color:red}div.rules-list li.ok::before{content:'\f00c';font:normal normal normal 14px/1 FontAwesome;font-size:14px;color:green}
src/main/resources/static/assets/plugins/passwordRulesHelper/passwordRulesHelper.min.js 0 → 100644
  View file @7c9a059
  1 +!function(a){a.fn.passwordRulesValidator=function(b){function d(b,c,d,e){b.test(c)?a("#"+e+" li."+d).removeClass("ko "+f.koClass).addClass("ok "+f.okClass):a("#"+e+" li."+d).removeClass("ok "+f.okClass).addClass("ko "+f.koClass)}function e(b,c,e){a.each(f.rules,function(a,b){b.enable&&d(new RegExp(b.regex,"g"),c,b.name,e)})}var c={rules:{length:{regex:".{8,}",name:"length",message:"8 characters",enable:!0},lowercase:{regex:"[a-z]{1,}",name:"lowercase",message:"1 lowercase",enable:!0},uppercase:{regex:"[A-Z]{1,}",name:"uppercase",message:"1 uppercase",enable:!0},number:{regex:"[0-9]{1,}",name:"number",message:"1 digit",enable:!0},specialChar:{regex:"[^a-zA-Z0-9]{1,}",name:"special-char",message:"1 special character",enable:!0}},msgRules:"Your password must contain :",container:void 0,containerClass:null,containerId:"checkRulesList",okClass:null,koClass:null,onLoad:void 0},f=a.extend(!0,c,b);return this.each(function(){a.isFunction(f.onLoad)&&f.onLoad(),oRulesBuilder='<span class="rules">'+f.msgRules+"</span>",oRulesBuilder+='<ul class="rules">',a.each(f.rules,function(a,b){b.enable&&(oRulesBuilder+='<li class="ko '+f.koClass+" "+b.name+'">'+b.message+"</li>")}),oRulesBuilder+="</ul>","undefined"==typeof f.container?(a(this).after('<div class="rules-list '+f.containerClass+'" id="'+f.containerId+'"></div>'),a(oRulesBuilder).appendTo("#"+f.containerId)):(f.container.addClass("rules-list"),a(oRulesBuilder).appendTo(f.container));var b="undefined"==typeof f.container?f.containerId:f.container.attr("id");e(f,a(this).val(),b),a(this).keyup(function(){e(f,a(this).val(),b)}),a(this).on("paste",function(){e(f,a(this).val(),b)}),a(this).change(function(){e(f,a(this).val(),b)})})}}(jQuery);
0 \ No newline at end of file 2 \ No newline at end of file
src/main/resources/static/index.html
  View file @7c9a059
@@ -71,6 +71,10 @@ @@ -71,6 +71,10 @@
71 <!-- sweetalert样式 --> 71 <!-- sweetalert样式 -->
72 <link rel="stylesheet" 72 <link rel="stylesheet"
73 href="/assets/bower_components/sweetalert/dist/sweetalert.css" /> 73 href="/assets/bower_components/sweetalert/dist/sweetalert.css" />
  74 + <!-- passwordRulesHelper样式 -->
  75 + <link rel="stylesheet"
  76 + href="/assets/plugins/passwordRulesHelper/passwordRulesHelper.min.css" />
  77 +
74 <!-- schedule计划调度AngularJS模块主css --> 78 <!-- schedule计划调度AngularJS模块主css -->
75 <link rel="stylesheet" href="/pages/scheduleApp/module/common/main.css" 79 <link rel="stylesheet" href="/pages/scheduleApp/module/common/main.css"
76 type="text/css" /> 80 type="text/css" />
@@ -414,6 +418,9 @@ @@ -414,6 +418,9 @@
414 <script src="/assets/js/dictionary.js"></script> 418 <script src="/assets/js/dictionary.js"></script>
415 <!-- tipso JS --> 419 <!-- tipso JS -->
416 <script src="/metronic_v4.5.4/plugins/tipso/js/tipso.js"></script> 420 <script src="/metronic_v4.5.4/plugins/tipso/js/tipso.js"></script>
  421 +<!-- passwordRulesHelper插件 -->
  422 +<script src="/assets/plugins/passwordRulesHelper/passwordRulesHelper.min.js"></script>
  423 +
417 <script data-exclude=1> 424 <script data-exclude=1>
418 //初始打开的片段地址 425 //初始打开的片段地址
419 var initFragment = "^_^initFragment^_^"; 426 var initFragment = "^_^initFragment^_^";
src/main/resources/static/pages/permission/user/changePWD.html
  View file @7c9a059
@@ -5,27 +5,27 @@ @@ -5,27 +5,27 @@
5 <div class="portlet-body"> 5 <div class="portlet-body">
6 <form class="form-horizontal" id="changePWDForm"> 6 <form class="form-horizontal" id="changePWDForm">
7 <div class="form-group" style="margin-top: 60px"> 7 <div class="form-group" style="margin-top: 60px">
8 - <label class="control-label col-md-5">原始密码： 8 + <label class="control-label col-md-4">原始密码：
9 </label> 9 </label>
10 - <div class="col-md-4"> 10 + <div class="col-md-6">
11 <div class="input-icon right"> 11 <div class="input-icon right">
12 <i class="fa"></i> 12 <i class="fa"></i>
13 <input type="password" class="form-control" name="oldPWD" /> </div> 13 <input type="password" class="form-control" name="oldPWD" /> </div>
14 </div> 14 </div>
15 </div> 15 </div>
16 <div class="form-group"> 16 <div class="form-group">
17 - <label class="control-label col-md-5">输入新密码： 17 + <label class="control-label col-md-4">输入新密码：
18 </label> 18 </label>
19 - <div class="col-md-4"> 19 + <div class="col-md-6">
20 <div class="input-icon right"> 20 <div class="input-icon right">
21 <i class="fa"></i> 21 <i class="fa"></i>
22 - <input type="password" class="form-control" name="newPWD" /> </div> 22 + <input type="password" class="form-control" name="newPWD" id="newPWD" /> </div>
23 </div> 23 </div>
24 </div> 24 </div>
25 <div class="form-group"> 25 <div class="form-group">
26 - <label class="control-label col-md-5">确认新密码： 26 + <label class="control-label col-md-4">确认新密码：
27 </label> 27 </label>
28 - <div class="col-md-4"> 28 + <div class="col-md-6">
29 <div class="input-icon right"> 29 <div class="input-icon right">
30 <i class="fa"></i> 30 <i class="fa"></i>
31 <input type="password" class="form-control" name="cnewPWD" /> </div> 31 <input type="password" class="form-control" name="cnewPWD" /> </div>
@@ -47,6 +47,44 @@ @@ -47,6 +47,44 @@
47 47
48 <script> 48 <script>
49 $(function(){ 49 $(function(){
  50 + // passwordRulesHelper 密码验证
  51 + $('#newPWD').passwordRulesValidator({
  52 + 'msgRules':'你填写的密码必须符合下面的规则：',
  53 + 'rules' : {
  54 + 'length' : {
  55 + 'regex': '.{8,}',
  56 + 'name': 'length',
  57 + 'message': '密码必须大于8个字符',
  58 + 'enable': true
  59 + },
  60 + 'lowercase' :{
  61 + 'regex': '[a-z]{1,}',
  62 + 'name': 'lowercase',
  63 + 'message': '至少需要一个小写字母',
  64 + 'enable': true
  65 + },
  66 + 'uppercase' : {
  67 + 'regex': '[A-Z]{1,}',
  68 + 'name': 'uppercase',
  69 + 'message': '至少需要一个大写字母',
  70 + 'enable': true
  71 + },
  72 + 'number' : {
  73 + 'regex': '[0-9]{1,}',
  74 + 'name': 'number',
  75 + 'message': '至少需要一个数字',
  76 + 'enable': true
  77 + },
  78 + 'specialChar' : {
  79 + 'regex': '[^a-zA-Z0-9]{1,}',
  80 + 'name': 'special-char',
  81 + 'message': '至少需要一个特殊字符',
  82 + 'enable': true
  83 + }
  84 + }
  85 + });
  86 +
  87 +
50 $("#confirm").on("click",function(){ 88 $("#confirm").on("click",function(){
51 var data = $('#changePWDForm').serializeJSON(); 89 var data = $('#changePWDForm').serializeJSON();
52 $.post('/user/changePWD',data,function(msg){ 90 $.post('/user/changePWD',data,function(msg){