手机版
你好,游客 登录 注册
背景:
阅读新闻

AngularJS 添加检查密码输入是否一致的功能

[日期:2015-01-24] 来源:Linux社区  作者:ilovewindy [字体: ]

利用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系列

  1. 带你走近AngularJS - 基本功能介绍 http://www.linuxidc.com/Linux/2014-05/102140.htm
  2. 带你走近AngularJS - 体验指令实例 http://www.linuxidc.com/Linux/2014-05/102141.htm
  3. 带你走近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

linux
相关资讯       AngularJS 
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数

       

评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款