实现效果:

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. 第2课 GUI程序实例分析

    1. GUI程序开发概述 (1)现代操作系统提供原生SDK支持GUI程序开发 (2)GUI程序开发是现代操作系统上的主流技术 (3)不同操作系统上的GUI开发原理相同 (4)不同操作系统上的GUI S ...

  2. 视频描述(Video Captioning)调研

    Video Analysis 相关领域介绍之Video Captioning(视频to文字描述)http://blog.csdn.net/wzmsltw/article/details/7119238 ...

  3. Hive常见问题汇总

    参考资料: Hive常见问题汇总 啟動hive出錯,提示沒有權限 2015年04月02日 09:58:49 阅读数:31769 这里小编汇集,使用Hive时遇到的常见问题. 1,执行#hive命令进入 ...

  4. Python实践练习:选择性拷贝

    题目 项目要求:编写一个程序,遍历一个目录树,查找特定扩展名的文件(诸如.pdf 或.jpg),不论这些文件的位置在哪里, 将它们拷贝到一个新的文件夹中. 代码 import os import sh ...

  5. java普通类、抽象类、接口、面向对象理解

    1.面向对象编程: 面向对象编程的语言不止java一种,还有: simula 67(第一个面向对象语言,支持单继承和一定含义的多态和部分动态绑定): Smalltalk(第一个支持动态类型的语言,支持 ...

  6. [jOOQ中文]3. 数据库版本管理工具Flyway

    https://segmentfault.com/a/1190000010526452 在执行数据库迁移时,我们推荐使用jOOQ与Flyway - 数据库迁移轻松. 在本章中,我们将简单的来使用这两个 ...

  7. Tomcat域名映射和端口设置

    1.打开tomcat主目录  --->  打开conf目录 ---> 找到并打开server.xml文件 2.修改tomcat的监听端口为80端口 在文件中找到: <Connecto ...

  8. JavaWeb--过滤器Filter (二)

    上一小节简单介绍了过滤器的概念和基本结构以及新建过滤器的步骤,本节使用过滤器设计一个小案例 -- 使用过滤器统一处理Post方式下参数值中文乱码的问题. 1.分析 对于有汉字信息处理的Servlet或 ...

  9. Codeforces Beta Round #9 (Div. 2 Only) D. How many trees? dp

    D. How many trees? 题目连接: http://www.codeforces.com/contest/9/problem/D Description In one very old t ...

  10. 微信H5支付常见问题汇总

    常见问题 一.回调页面 正常流程用户支付完成后会返回至发起支付的页面,如需返回至指定页面,则可以在MWEB_URL后拼接上redirect_url参数,来指定回调页面. 如,您希望用户支付完成后跳转至 ...