感谢作者(http://blog.brunoscopelliti.com/angularjs-directive-to-check-that-passwords-match)

利用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.cnblogs.com/ilovewindy/p/3795993.html):

 <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:添加检查密码输入是否一致的功能的更多相关文章

  1. 从头认识Spring-3.8 简单的AOP日志实现(注解版)-扩展添加检查订单功能,以便记录并检測输入的參数

    这一章节我们讨论一下扩展添加检查订单功能,以便记录并检測输入的參数. 1.domain 蛋糕类: package com.raylee.my_new_spring.my_new_spring.ch03 ...

  2. 从头认识Spring-3.4 简单的AOP日志实现-扩展添加检查订单功能,以便记录并检測输入的參数

    这一章节我们再上一个章节的基础上加上一个检查订单功能 1.domain 蛋糕类: package com.raylee.my_new_spring.my_new_spring.ch03.topic_1 ...

  3. angularjs脏检查

    angularjs实现了双向绑定,与vue的defineProperty不同,它的原理在于它的脏检查机制,以下做了一些总结: angular.js介绍 AngularJs是mvvm框架,它的组件是vm ...

  4. 提高sevenzipsharp 检查密码的速度(1)

    前言:sevenzipsharp检查密码(包括检查压缩包的有效性)的函数是SevenZipExtractor.check(), sevenzipsharp调用的是7zip的动态链接库,而且不止是7zi ...

  5. Android 高仿微信支付密码输入控件

    像微信支付密码控件,在app中是一个多么司空见惯的功能.最近,项目需要这个功能,于是乎就实现这个功能. 老样子,投篮需要找准角度,变成需要理清思路.对于这个"小而美"的控件,我们思 ...

  6. PAT 1081 检查密码(15) (代码+思路)

    1081 检查密码(15 分) 本题要求你帮助某网站的用户注册模块写一个密码合法性检查的小功能.该网站要求用户设置的密码必须由不少于6个字符组成,并且只能有英文字母.数字和小数点 .,还必须既有字母也 ...

  7. 检查用户输入信息是否完整(vb.net实现)

        机房收费系统中.在将用户输入的信息封装到实体中作为參数传到B层之前,总要对用户输入的信息进行检查.我将这种检查分为两类: 合法性检查 完整性检查     所谓合法性检查,就是用户输入的信息是否 ...

  8. B1081 检查密码 (15分)

    B1081 检查密码 (15分) 本题要求你帮助某网站的用户注册模块写一个密码合法性检查的小功能.该网站要求用户设置的密码必须由不少于6个字符组成,并且只能有英文字母.数字和小数点 .,还必须既有字母 ...

  9. C控制台密码输入:输入一个字符显示一个星号

    要在c控制台中输入一个字符显示一个星号, 则不能用"stdio.h'提供的库函数,因为它们都是带回显的,比如getchar() getchar()用来接收输入的字符串,输入一个字符就回显一个 ...

随机推荐

  1. --NSArray与NSMutableArray用copy修饰还是strong(转)

    一.NSMutableArray 被copy.strong修饰后的变化: 把NSMutableArray用copy修饰有时就会crash,因为对这个数组进行了增删改操作,而copy后的数组变成了不可变 ...

  2. 知识记忆1:标志寄存器PSW

    8086CPU的flag寄存器结构如下: [ ] [ ] [ ] [ ] [OF][DF][IF][TF][SF][ZF][ ][AF][ ][PF][ ][CF] 其中debug中的显示为: 标志 ...

  3. Android开发中的SQLite事务处理,即beginTransaction()方法

    使用SQLiteDatabase的beginTransaction()方法可以开启一个事务,程序执行到endTransaction() 方法时会检查事务的标志是否为成功,如果程序执行到endTrans ...

  4. Spring Cloud (5) 分布式配置中心

    Spring Cloud Config 在分布式系统中,由于服务数量很多,为了方便服务配置文件统一管理,实时更新,所以需要分布式配置中心组件.在Spring Cloud中,使用Spring Cloud ...

  5. Git与SVN版本控制系统

    关于版本控制 什么是版本控制?版本控制是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统.在本书所展示的例子中,我们仅对保存着软件源代码的文本文件作版本控制管理,但实际上,你可以对任 ...

  6. CSS固定布局:960GS

    960栅格系统 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  7. How an SSL connection is established

    An SSL connection between a client and server is set up by a handshake, the goals of which are: To s ...

  8. Redis 之仿微博demo

    一.用户注册登录 include './header.php'; include './function.php'; $username = p('username'); $password = p( ...

  9. CAD把一个DWG文件中的多个图框一次性全部插入到打开的DWG文件中

    主要用到函数说明: _DMxDrawX::InsertBlock 向控件数据库中插入一个图块,不用它插入匿名块,详细说明如下: 参数 说明 BSTR pszDwgFileName 图块定义的dwg 文 ...

  10. VMware虚拟机下Ubuntu安装VMware Tools详解

    一.安装步骤 1.开启虚拟机,运行想要安装VMware Tools的系统,运行进入系统后,点击虚拟机上方菜单栏的“虚拟机(M)”->点击“安装 VMware Tools”,图片所示是因为我已经安 ...