利用AngularJS的directive,我们可以很方便的实现检验功能。代码如下:
// 密码验证directive
ftitAppModule.directive('pwCheck', [function () {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
var firstPassword = '#' + attrs.pwCheck;
elem.add(firstPassword).on('keyup', function () {
scope.$apply(function () {
var v = elem.val()===$(firstPassword).val();
ctrl.$setValidity('pwmatch', v);
});
});
}
}
}]);
Demo html代码(feedback部分请参考 http://www.linuxidc.com/Linux/2015-01/112324.htm ):
<div class="form-group">
<label for="userPassword">密码</label>
<input type="password" class="form-control" id="userPassword" name="userPassword"
placeholder="请输入密码" ng-model="selectedUser.userPassword">
</div>
<div class="form-group has-feedback"
ng-class="{'has-success' : !usrMgrForm.confirmPassword.$pristine && usrMgrForm.confirmPassword.$valid,
'has-error' : !usrMgrForm.confirmPassword.$pristine && usrMgrForm.confirmPassword.$invalid }">
<label for="confirmPassword">确认密码</label>
<input type="password" class="form-control" id="confirmPassword" name="confirmPassword"
placeholder="请再次输入密码" ng-model="selectedUser.confirmPassword" pw-check="userPassword">
<div ng-show="!usrMgrForm.confirmPassword.$pristine && tagName.confirmPassword.$valid">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div ng-show="!usrMgrForm.confirmPassword.$pristine && usrMgrForm.confirmPassword.$invalid">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
效果如下:
AngularJS权威教程 清晰PDF版 http://www.linuxidc.com/Linux/2015-01/111429.htm
希望你喜欢,并分享我的工作~带你走近AngularJS系列:
- 带你走近AngularJS - 基本功能介绍 http://www.linuxidc.com/Linux/2014-05/102140.htm
- 带你走近AngularJS - 体验指令实例 http://www.linuxidc.com/Linux/2014-05/102141.htm
- 带你走近AngularJS - 创建自定义指令 http://www.linuxidc.com/Linux/2014-05/102142.htm
如何在 AngularJS 中对控制器进行单元测试 http://www.linuxidc.com/Linux/2013-12/94166.htm
在 AngularJS 应用中通过 JSON 文件来设置状态 http://www.linuxidc.com/Linux/2014-07/104083.htm
AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm
AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据 http://www.linuxidc.com/Linux/2014-07/104402.htm
AngularJS 的详细介绍:请点这里
AngularJS 的下载地址:请点这里
本文永久更新链接地址:http://www.linuxidc.com/Linux/2015-01/112323.htm