实现效果:

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. JavaScript(一) - 精简

    javascript一 javascript 是什么? 1. 运行在浏览器端 ,定义网页的行为, 2.所有的html页面都有js. 二 javascript 定义方式? 1 在html文件里 js 可 ...

  2. C++快速输出一个整数的二进制表示(不用写函数)

    如果要输出int型的整数x,代码为: cout << bitset<>(x) << endl; 如果要输出long long型的整数x,代码为: cout < ...

  3. 6.5笔记-DQL高级查询

    一.高级查询 Exists Drop table if exists result; 子查询有返回结果: EXISTS子查询结果为TRUE 子查询无返回结果: EXISTS子查询结果为FALSE, 外 ...

  4. 「小程序JAVA实战」小程序视频组件与api介绍(51)

    转自:https://idig8.com/2018/09/22/xiaochengxujavashizhanxiaochengxushipinzujianyuapijieshao50/ 这次说下,小程 ...

  5. IOS上架(九) AppStore编译生成ipa文件并上传

    IOS上架上传ipa文件 AppStore https://itunesconnect.apple.com delphi project>option里的CFBundleVersion 上传的版 ...

  6. 可视化库-Matplotlib-条形图(第四天)

    1.画两个条形图,bar和barh, 同时axes[0].axhline画一条横线,axes[1].axvline画一条竖线 import numpy as np import matplotlib. ...

  7. Apache Sqoop 结构化、非结构化数据转换工具

    简介: Apache Sqoop 是一种用于 Apache Hadoop 与关系型数据库之间结构化.非结构化数据转换的工具. 一.安装 MySQL.导入测试数据 1.文档链接:http://www.c ...

  8. 话说C# 6.0之后

    最想看到的:1. 加入脚本语言支持,可以解释运行,作为程序的二次开发语言(类似于vba,python).2. 可以自定义运算符,为了安全起见,自定义运算符应该特别予以说明(类似于数学表达式,多样式的运 ...

  9. Python运维开发基础06-语法基础

    上节作业回顾 (讲解+温习120分钟) #!/usr/bin/env python3 # -*- coding:utf-8 -*- # author:Mr.chen # 添加商家入口和用户入口并实现物 ...

  10. nyoj36-最长公共子序列 (LCS)

    http://acm.nyist.net/JudgeOnline/problem.php?pid=36 最长公共子序列 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 ...