Angularjs 通过directive实现验证两次输入是否一致的功能
实现效果:
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实现验证两次输入是否一致的功能的更多相关文章
- js验证两次输入的密码是否一致
原文链接:http://blog.csdn.net/DDfanL/article/details/51460324
- AngularJS:添加检查密码输入是否一致的功能
感谢作者(http://blog.brunoscopelliti.com/angularjs-directive-to-check-that-passwords-match) 利用AngularJS的 ...
- easyui-validatebox 验证两次密码是否输入一致
验证两次密码是否输入一致 $.extend($.fn.validatebox.defaults.rules, { /*必须和某个字段相等*/ equalTo: { vali ...
- angularjs通过ng-change和watch两种方式实现对表单输入改变的监控
angularjs通过ng-change和watch两种方式实现对表单输入改变的监控 直接上练习代码 <!DOCTYPE html> <html xmlns="http:/ ...
- vue中将验证表单输入框的方法写在一个js文件中(表达式验证邮箱、身份证、号码、两次输入的密码是否一致)
文章目录 1.实现的效果 2.编写的js文件(这里写在了api文件下) 3.在vue页面中引入(script) 4.页面代码 1.实现的效果 20220606_154646 2.编写的js文件(这里写 ...
- 利用 jQuery 来验证密码两次输入是否相同
html <div class="row"> <div class="panel panel-info"> <div class= ...
- Angularjs之directive指令学习笔记(二)
1.Directive的五个实例知道driective作用.其中字段restrict.template. replace.transclude.link用法 参考文章链接地址:http://damoq ...
- 前端angularJS利用directive实现移动端自定义软键盘的方法
最近公司项目的需求上要求我们iPad项目上一些需要输入数字的地方用我们自定义的软键盘而不是移动端设备自带的键盘,刚接到需求有点懵,因为之前没有做过,后来理了一下思路发现这东西也就那样.先看一下实现之后 ...
- AngularJS入门之数据验证
AngularJS自带了对表单或控件的输入数据进行验证的功能,对于Html5的基础控件均有内建的验证器,以下列举了所有支持的验证类型: email max maxlength min minlengt ...
随机推荐
- c#中的dynamic类型
dynamic是C#4.0引入的全新类型,它允许其操作略过编译期类型检查,而在运行时期处理. dynamic类型在大多数情况下和object类似,不同点在于编译器对于dynamic类型的 数据不做进一 ...
- 【POJ】3378 Crazy Thairs(树状数组+dp+高精)
题目 传送门:QWQ 分析 题意:给个数列,求有多少五元上升组 考虑简化一下问题:如果题目求二元上升组怎么做. 仿照一下逆序对,用树状数组维护一下就ok了. 三元怎么做呢? 把二元的拓展一位就可以了, ...
- JMS消息服务模型
JMS--仅仅是一种规范,一种接口规约,一种编程模型.类似的JPA,JSR等 场景: 1.多个系统之间交互,实现可以采取RPC,但是交互复杂,基本就是点对点的方式 2.其实交互就是消息,而JMS就是消 ...
- NodeJs通过async/await处理异步
##场景 远古时代 我们在编写express后台,经常要有许多异步IO的处理.在远古时代,我们都是用chunk函数处理,也就是我们最熟悉的那种默认第一个参数是error的函数.我们来模拟一个Mongo ...
- selenium webdriver ——执行javascript代码
在代码中import org.openqa.selenium.JavascriptExecutor;就可以使用executeScript.executeAsyncScript这两个方法了 execut ...
- c# 之 new 关键字
1.实例化变量 DataTable dt = new DataTable(); 2.调用构造函数 class CoOrds { public int x, y; // 实例构造函数(默认构造函数) ...
- modern.IE
1.主要测试IE浏览器的兼容性问题 2.网站上提供各种虚拟机来表现兼容性问题,可以像平常一样使用浏览器测试,但是中国访问速度比较慢 3.网址:http://loc.modern.ie/zh-cn/vi ...
- Python any() 函数
Python any() 函数 Python 内置函数 描述 any() 函数用于判断给定的可迭代参数 iterable 是否全部为 False,则返回 False,如果有一个为 True,则返回 ...
- 转)bash快捷键
粗体表示推荐,也许对每个人不同. Ctrl-A 相当于HOME键,用于将光标定位到本行最前面 Ctrl-E 相当于End键,即将光标移动到本行末尾 Ctrl-B 相当于左箭头键,用于将光标向左移动一格 ...
- 自己动手搭建Git服务器-Gitblit
首先到官网http://gitblit.com/下载最新版本的Gitblit GO 解压缩到本地目录中 E:\git\gitblit132 官方文档:http://gitblit.com/setu ...