angularjs 校验密码字段一致性
directives.directive('pwCheck', function () {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
var firstPassword = '#' + attrs.pwCheck;
// 网上好多例子都掉了$(elem) 美元符号和括号
$(elem).add(firstPassword).on('keyup', function () {
scope.$apply(function () {
alert(elem.val());
var v = elem.val()===$(firstPassword).val();
ctrl.$setValidity('pwmatch',v);
});
});
}
};
});
<div class="form-group" ng-class="{'has-error': developerForm.password.$dirty && developerForm.password.$invalid}">
<div class="col-sm-12">
<input type="password" ng-model="developer.password" name="password" id="password" class="form-control" placeholder="预设密码" required>
</div>
<p class="text-warning help-block" ng-show="developerForm.password.$dirty && developerForm.password.$invalid">
<small ng-show="developerForm.password.$error.required">预设密码必填!!</small>
</p>
</div>
<div class="form-group" ng-class="{'has-error': developerForm.rePassword.$dirty && developerForm.rePassword.$invalid}">
<div class="col-sm-12 ">
<input type="password" ng-model="developer.rePassword" name="rePassword" class="form-control" placeholder="确认密码" pw-check="password" required>
</div>
<p class="text-warning help-block" ng-show="developerForm.rePassword.$dirty && developerForm.rePassword.$invalid">
<small ng-show="developerForm.rePassword.$error.required">确认密码必填!!</small>
<small ng-show="developerForm.rePassword.$error.pwmatch">预设密码和确认密码不一致!!</small>
</p>
</div>
http://angularjs4u.com/directives/angularjs-check-passwords-match-directive/
分享到:
相关推荐
6. 自定义验证器`compare-pwd`用于比较两个密码输入框的内容是否一致。这是通过创建一个自定义指令来实现的,该指令会在用户输入时触发,并根据另一个密码输入框的内容来校验当前密码框的值。 在表单校验中,...
本文将深入讲解如何在AngularJS中验证重复密码的两种不同方法,以及它们各自的优缺点。 ### AngularJS验证重复密码的两种方法 1. **方法一:利用ng-model和ng-show进行简单验证** 在第一种方法中,开发者使用...
通过这种方式,我们可以为模版驱动的表单实现自定义验证功能,如密码确认,从而确保数据的正确性和安全性。这种自定义验证方法不仅适用于密码确认,还可以应用于其他任何需要自定义验证逻辑的场景,例如邮箱格式检查...
- **数据一致性**:确保输入的数据与数据库中的数据保持一致,如用户密码的加密比对。 3. **服务器端框架集成验证**: - 使用如Spring MVC、ASP.NET MVC等框架提供的验证机制,可以通过注解或配置文件定义验证...
例如,可以设计用户表(user)、文章表(article)、评论表(comment)等,并通过适当的关联关系实现数据的一致性和完整性。 ##### 接口设计 API接口设计应遵循RESTful风格,确保接口清晰、一致。例如,可以设计如下接口...