我正在尝试创建一个符合以下条件的密码字段:
- 有效密码的长度应为 6 到 24 个符号,并且至少有一位数字。
- 当该字段包含无效密码时,它应该始终具有 .ng-invalid 类。
为了使密码符号可见,我使用了两个通过模型同步的输入:
<form name="form" ng-app="myApp" ng-controller="Controller" novalidate>
<label>
Password:
<input type="password" name="uPass" maxlength="24" ng-hide="formFlags.showpass" ng-model="user.pass" ng-required validate-pass />
<input type="text" name="uPass" maxlength="24" ng-show="formFlags.showpass" ng-model="user.pass" ng-required validate-pass />
<span class="message" ng-show="form.uPass.$dirty && form.uPass.$invalid">Must be from 6 to 24 symbols long ang contain at least one digit.</span>
</label>
<label>
<input type="checkbox" name="uShowPass" ng-model="formFlags.showpass" toggle-pass/>Show password
</label>
</form>
在此处查看完整代码:http://jsfiddle.net/adept/9uCGQ/44/ .
在这里,我正在尝试执行以下操作:
- 我输入的密码无效。输入字段gets.ng-无效类 (红色边框)。
- 我点击“显示密码”。密码输入获取 隐藏,文本输入可见。
问题是在我更改它的值之前不会对其进行验证。如何让它在显示后立即生效?
UPD:在 1.2.x 及更高版本的 AngularJS 中,我的示例工作正常,该问题仅与较低版本相关。
最佳答案
只需添加 formatters.unshift,这样它也会查看模型更改,而不仅仅是查看。
编辑 fiddle :
添加代码:
ctrl.$formatters.unshift(function(viewValue) {
if (viewValue.length >= scope.formFlags.minpasslength && PASS_REGEXP.test(viewValue)) {
// it is valid
ctrl.$setValidity('pass', true);
} else {
// it is invalid
ctrl.$setValidity('pass', false);
}
// update model anyway to sync password fields
return viewValue;
});
有关 ng-controller 文档中两个属性(解析器和格式化程序)的更多信息:http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController
关于javascript - AngularJS 中带有验证和 "Show password"选项的密码字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21161671/