实现效果:

1> 当输入确认密码时验证:  

2> 当输入密码时验证:

  

实现步骤:

1.页面代码:  

<input class="form-control" type="password" id="password" name="password"
ng-model="user.password"
match-check="confrimPassword|confrimPassword"> input class="form-control" type="password" id="confrimPassword"
name="confrimPassword"
ng-model="user.confrimPassword"
match-check="password|confrimPassword" onpaste="return false">
<span class=" error"
ng-show="!form.password.$pristine && !form.confrimPassword.$pristine && form.confrimPassword.$error.match">This does not match the 'Password' entered above. Please re-enter your password.</span>

2.自定义验证指令

"use strict";

/**
* Created by jerry_yang on 2015/11/27.
* user defined match check directive
*/
angular.module('bet.match', [])
.directive('matchCheck', matchCheck); function matchCheck() {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
var matchCheck = attrs.matchCheck;
var param = matchCheck.split('|');
var inputCtr = '#' + param[];
elem.bind(inputCtr).on('keyup', function () {
scope.$apply(function () {
var v = elem.val() === $(inputCtr).val();
scope.form[param[]].$setValidity('match', v);
});
});
}
}
}

Angularjs 通过directive实现验证两次输入是否一致的功能的更多相关文章

  1. js验证两次输入的密码是否一致

    原文链接:http://blog.csdn.net/DDfanL/article/details/51460324

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

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

  3. easyui-validatebox 验证两次密码是否输入一致

    验证两次密码是否输入一致 $.extend($.fn.validatebox.defaults.rules, {        /*必须和某个字段相等*/        equalTo: { vali ...

  4. angularjs通过ng-change和watch两种方式实现对表单输入改变的监控

    angularjs通过ng-change和watch两种方式实现对表单输入改变的监控 直接上练习代码 <!DOCTYPE html> <html xmlns="http:/ ...

  5. vue中将验证表单输入框的方法写在一个js文件中(表达式验证邮箱、身份证、号码、两次输入的密码是否一致)

    文章目录 1.实现的效果 2.编写的js文件(这里写在了api文件下) 3.在vue页面中引入(script) 4.页面代码 1.实现的效果 20220606_154646 2.编写的js文件(这里写 ...

  6. 利用 jQuery 来验证密码两次输入是否相同

    html <div class="row"> <div class="panel panel-info"> <div class= ...

  7. Angularjs之directive指令学习笔记(二)

    1.Directive的五个实例知道driective作用.其中字段restrict.template. replace.transclude.link用法 参考文章链接地址:http://damoq ...

  8. 前端angularJS利用directive实现移动端自定义软键盘的方法

    最近公司项目的需求上要求我们iPad项目上一些需要输入数字的地方用我们自定义的软键盘而不是移动端设备自带的键盘,刚接到需求有点懵,因为之前没有做过,后来理了一下思路发现这东西也就那样.先看一下实现之后 ...

  9. AngularJS入门之数据验证

    AngularJS自带了对表单或控件的输入数据进行验证的功能,对于Html5的基础控件均有内建的验证器,以下列举了所有支持的验证类型: email max maxlength min minlengt ...

随机推荐

  1. [转]Docker 为什么这么火

    本文来自:Docker为什么这么火 以及此文:http://cloud.51cto.com/art/201408/447966_1.htm Docker 我的理解是,相对于 VMware 的一个分支. ...

  2. Linux Expect 简介和使用实例

    expect简介和使用实例 1 expect 简介 expect 是用来进行自动化控制和测试的工具. 主要是和交互式软件telnet ftp passwd fsck rlogin ssh tip 等进 ...

  3. django-引用静态文件

    1.需要配置settings # 静态文件目录 STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static') 2.页面加载静态文件 {% load sta ...

  4. C# 二元一次方程参数求解

    本文记录了关于求直线斜率及纵截距值的简单方法,只是简单的记录下求解思路,最终还需根据具体项目进行优化. 设直线方程式为:y=kx+b 编程思想: 1.代入y1与x1的值,得到:y1=kx1+b 2.代 ...

  5. Rhythmk 学习 Hibernate 04 - Hibernate 辅助工具 之 JBoos Tool

    1.安装JBoos Tool Help -> Install new Software 然后添加: http://download.jboss.org/jbosstools/updates/de ...

  6. maven+testng+reportng的pom设置

    在pom.xml 加入: <dependency> <groupId>org.testng</groupId> <artifactId>testng&l ...

  7. c# 数据拼接成键值对格式

    public static object FindLayoutTypes() { //地鼓.地裂.墙裂.井水.泉水 var sb = new StringBuilder(); sb.Append(ge ...

  8. ElasticSearch、Kibana 启动(含前台和后台启动、停止)(含界面浏览)

    前提: Elasticsearch-2.4.3的下载(图文详解) Elasticsearch-2.4.3的单节点安装(多种方式图文详解) Elasticsearch-2.4.3的3节点安装(多种方式图 ...

  9. Redis 字典的实现

    [Redis 字典的实现] 注意 dict 类型使用了两个指针,分别指向两个哈希表. 其中, 0 号哈希表(ht[0])是字典主要使用的哈希表, 而 1 号哈希表(ht[1])则只有在程序对 0 号哈 ...

  10. pdb调试

    [pdb调试] 前置技能: os.getcwd():获取当前工作目录. os.chdir():切换工作目录. 运行 python -m pdb myscript.py (Pdb) 会自动停在第一行,等 ...