密码验证与密码栏®Exp在angular using指令中的特殊字符
Password Validation with password bar & regExp special characters in angular using directive
这个应用程序是为我工作,但如果有人发现任何错误/错误,请纠正它。
我正在使用angular js指令创建一个密码验证的小应用程序。用户可以验证所需的密码。大写字符和一个最小长度为8的num值。我还用它创建了密码强度条。
感谢Here Plunkr Link my
这是我的HTML文件:
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script data-require="angular.js@*" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.4.0-beta.3/angular.js"></script>
<script src="passwordModule.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div ng-app="passwordModule" ng-controller="pwdCtrl" class="container">
<h2>Password Validation:</h2>
<form name="form">
<div class="form-group">
<label>Password</label>
<input type="text" name="password" id="password" ng-model="user.password" ng-model-options="{allowInvalid: true}"
pattern-validator="((?=.*'d)(?=.*[A-Z])(?=.*'W).{8,8})" class="form-control"/>
</div>
<span class="alert alert-error" ng-show="form.password.$error.passwordPattern">
Password required 1 special & capital letter, 1 numeric letter <br> Required minimum 8 letter.</span>
<div class="form-group">
<label>Password Strength</label>
<password-strength ng-model="user.password"></password-strength>
<label>Confirm Password</label>
<input class="form-control" type = "text" name = "Confpassword" ng-model="user.cnfPwd" data-equal-to="password" >
<div data-ng-show = "showmsg"> Password matched </div>
<div data-ng-show = "hidemsg"> Password not matched </div>
</div>
<button class="btn btn-primary" type="button" ng-disabled = "disabledButton"> save </button>
</form>
</div>
<script type="text/javascript">
</script>
</body>
</html>
这里是我的控制器文件:
var pwdModule = angular.module('passwordModule', []);
//Controller
pwdModule.controller('pwdCtrl', ['$scope',
function($scope) {
// Initialise the password as hello
$scope.user = {};
$scope.showmsg = false;
$scope.disabledButton = true;
if($scope.user.password === undefined) {
$scope.showmsg = false;
}
$scope.$watch('user.cnfPwd', function(newVal, oldVal) {
if(newVal !== undefined){
$scope.hidemsg = true;
}
if(newVal === $scope.user.password && $scope.user.password !== undefined) {
$scope.showmsg = true;
$scope.disabledButton = false;
$scope.hidemsg = false;
} else {
$scope.showmsg = false;
$scope.disabledButton = true;
}
})
}
]);
// Directive: Validate a regex pattern
pwdModule.directive('patternValidator', [
function() {
return {
require: 'ngModel',
restrict: 'A',
link: function(scope, elem, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
var patt = new RegExp(attrs.patternValidator);
var isValid = patt.test(viewValue);
ctrl.$setValidity('passwordPattern', isValid);
return viewValue;
});
}
};
}
]);
// Dircetive: Display strength bar
pwdModule.directive('passwordStrength', [
function() {
return {
require: 'ngModel',
restrict: 'E',
scope: {
password: '=ngModel'
},
link: function(scope, elem, attrs, ctrl) {
scope.$watch('password', function(newVal) {
var strength = isSatisfied(newVal && newVal.length >= 8) +
isSatisfied(newVal && /[A-z]/.test(newVal)) +
isSatisfied(newVal && /(?=.*'W)/.test(newVal)) +
isSatisfied(newVal && /'d/.test(newVal));
var style = '',
percent= 0;
switch (strength) {
case 1:
style = 'danger';
percent = 25;
break;
case 2:
style = 'warning';
percent = 50;
break;
case 3:
style = 'warning';
percent = 75;
break;
case 4:
style = 'success';
percent = 100;
break;
}
scope.style = style;
scope.percent = percent;
function isSatisfied(criteria) {
return criteria ? 1 : 0;
}
}, true);
},
template: '<div class="progress">' +
'<div class="progress-bar progress-bar-{{style}}" style="width: {{percent}}%"></div>' +
'</div>'
}
}
])
请检查一下,看看是否有需要修改的地方。
说到错误:
isSatisfied (newVal,,/[a - z]/test (newVal)) +
这里,[A-z]
匹配的不仅仅是英文字母,它还匹配[
, '
, ]
, ^
, _
和`
,参见这个SO帖子。
isSatisfied (newVal,,/(? = . * ' W)/test (newVal)) +
您应该锚定前瞻性以提高性能:
isSatisfied(newVal && /^(?=.*'W)/.test(newVal)) +
^
注意,{8,8}
等价于{8}
——前面的子模式正好出现8次。使用
pattern-validator="(?=.*'d)(?=.*[A-Z])(?=.*'W).{8}"
或者(如果默认没有锚定,在任何地方都找不到):
pattern-validator="^(?=.*'d)(?=.*[A-Z])(?=.*'W).{8}$"
相关文章:
- 如何通过引用var Using DataTables来进行分页或排序
- 如何使用密码检测网络中的状态连接
- Meteor忘记了密码的实现
- 使用密码对话框Javascript请求帮助
- Internet Explorer缺少占位符支持,特别是密码字段
- angular js密码强度显示问题
- 一个密码测试程序,如果存在空格,它会提醒用户
- 密码输入键脚本在首次使用后无法工作
- JavaScript生成html格式的密码
- 在表单完成并确认密码之前,请禁用提交按钮
- Object.prototype using 'this'
- pushState()正在驳回'记住密码'对话
- using LocalStorage ionic 2
- jQuery Replacing, Using arrays
- 如何对单个页面进行密码保护(这不是身份验证系统的一部分)
- AngularJs Cordova安卓应用程序中输入的4位密码PIN验证
- Using jQuery with classes from ES6
- 在节点 js 中使用护照本地模块验证(登录)密码时出错
- Dropdownlist using javascript
- 密码验证与密码栏®Exp在angular using指令中的特殊字符