我想要一些关于使用的具体帮助和建议ng-pattern.
我有以下规则:
在我的前端,我在HTML中有这个:
<span ng-show="regForm.password.$dirty &&
!regForm.password.$error.required &&
!regForm.password.$error.minlength &&
(aus.password != aus.confirmPassword)">
Passwords do not match
</span>
有没有办法可以创建其他ng-shows来测试输入是否符合其他三个规则ng-pattern？
这是我的 <input>
<input id="password"
name="password"
ng-model="aus.password"
ng-minlength="6"
ng-required="true"
type="password"
value="" />
希望有人可以帮我解决使用ng-pattern的问题.请注意,这不是使用HTML正则表达式的重复问题.我正在寻找具体的ng-pattern帮助.
为ng-pattern它构建一个正则表达式需要一个数字,一个大写字母和一个特殊字符可能很难管理,虽然有一些 SO 答案将使你朝这个方向.正如@Petr Averyanov建议的那样,自定义验证器是一种更好的方法.它们更灵活,更易于维护,并允许您将各种错误情况分成不同的消息给用户.
在Angular的Forms文档的Custom Validation部分中阅读它们.Pop打开此片段进行演示:
var app = angular.module('validationDemo', ['ngMessages']);
app.directive('strongPassword', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$validators.containsSpecial = function(modelValue, viewValue) {
if (ctrl.$isEmpty(modelValue)) { return true; }
if (/[^a-z0-9]/i.test(viewValue)) { return true; }
return false;
};
ctrl.$validators.containsDigit = function(modelValue, viewValue) {
if (ctrl.$isEmpty(modelValue)) { return true; }
if (/\d/.test(viewValue)) { return true; }
return false;
};
ctrl.$validators.containsUppercase = function(modelValue, viewValue) {
if (ctrl.$isEmpty(modelValue)) { return true; }
if (/[A-Z]/.test(viewValue)) { return true; }
return false;
};
}
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script>
<body ng-app="validationDemo">
<form name="form" class="css-form" novalidate>
<div>
Password:
<input type="text" ng-model="password" name="password" strong-password /><br />
{{password}}
<ul ng-messages="form.password.$error" multiple="true">
<li ng-message="containsSpecial">
Your password must contain at least one non-letter, non-digit character
</li>
<li ng-message="containsDigit">
Your password must contain at least one digit
</li>
<li ng-message="containsUppercase">
Your password must contain at least one uppercase letter
</li>
</ul>
</div>
</form>
</body>首先,为验证器声明一个指令.我们称之为strongPassword.
var app = angular.module('validationDemo', []);
app.directive('strongPassword', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
// Validators go here
}
};
});
将指令input作为HTML属性附加到您的密码,通常使用camelCase进行破折号转换.
<body ng-app="validationDemo">
<form name="form" class="css-form" novalidate>
<div>
Password:
<input type="text" ng-model="password" name="password" strong-password /><br />
{{password}}
</div>
</form>
</body>
对于要添加的每个验证,请在指令中设置一个键ctrl.$validators.因此要验证密码是否包含数字,
link: function(scope, elm, attrs, ctrl) {
ctrl.$validators.containsDigit = function(modelValue, viewValue) {
if (ctrl.$isEmpty(modelValue)) { return true; } // They haven't typed yet
if (/\d/.test(viewValue)) { return true; } // Found a digit
return false;
};
}
然后form.<element name>.$error,在这种情况下,您可以访问错误form.password.$error.containsDigit.使用该ng-messages指令(确保导入angular-messages.js)向用户显示错误.
<ul ng-messages="form.password.$error" multiple="true">
<li ng-message="containsDigit">
Your password must contain at least one digit
</li>
</ul>
值为ng-messages表单上的错误对象,每个都ng-message描述一个键,$error您要打印一个值.该multiple选项告诉Angular一次显示所有消息; 否则,你一次只能获得一个.
| 归档时间： |
|
| 查看次数： |
317 次 |
| 最近记录： |