实现效果:

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. cas服务器搭建

    一.CAS是Central Authentication Service的缩写,中央认证服务,一种独立开放指令协议.CAS 是 Yale 大学发起的一个开源项目,旨在为 Web 应用系统提供一种可靠的 ...

  2. multiboot 的golden image 和update image的 mcs文件的生成及调试

    multiboot的功能对于不同的FPGA应该是相同的,但是具体的配置可能不一样.基本流程如下: 上图来源是xapp1246,  明显分为5个步骤,在FPGA启动时是有flash的0地址开始,但是因为 ...

  3. android自动化之MonkeyRunner测试环境配置(一)

    Android自动化测试之MonkeyRunner 一.Android自动化测试之环境搭建 1.1  Android-sdk介绍 ¢ SDK(Software development kit)软件开发 ...

  4. servlet笔记1

    Myeclipse关于Servlet项目文件的组织方面,如下: WEB-INF:这个目录名称和位置是固定的,放置在该目录下的文件或目录,对外界来说的封闭的,也就是客户端无法用http的任何方式访问到其 ...

  5. C++Builder STL 泛型

    STL(Standard Template Library)标准模板库, 包括了算法,容器,迭代器.就是泛型. 向量(vector) 连续存储的元素<vector>列表(list) 由节点 ...

  6. 图片拼接SIFT

    图片拼接 SIFT: 特征点处理:位置插值,去除低对比度点,去除边缘点 方向估计 描述子提取 下面的程序中使用: 第一步: 使用SIFT生成器提取描述子和特征 第二步: 使用KNN检测来自A,B图的S ...

  7. 使用通配符配置action

    建立struts2wildcard项目,此实例基本仿照前面前面第7点的实例改写而成.为了使用通配符,只需要改写配置文件即可.此实例未使用通配时的配置文件如下: <action name=&quo ...

  8. 对avalon的类名操作进行升级

    在对SVG元素进行类名操作时,发现有一个坑爹的事情,它的className竟然是一个对象,因此报一系列BUG.第一次想到的方法是添加setClasses, getClasses两个更底层的方法.于是相 ...

  9. UNITY录制视屏解决方案 - ShareREC For Unity3D

    注意buildSetting里面,AutoGraphic改成opengl es2,否则魅蓝手机上容易出现1/4屏 一.导入项目 1.到Mob官网下载ShareREC For Unity3D 的SDK包 ...

  10. python教学视频

    3 X王的 链接: http://pan.baidu.com/s/1bW2UrO 密码: quit4 django 链接: http://pan.baidu.com/s/1o8UsNDS 密码: 8x ...