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 ...
随机推荐
- 性能基准测试:KVM大战Xen
编译自:http://major.io/2014/06/22/performance-benchmarks-kvm-vs-xen/作者: Major Hayden原创:LCTT https://lin ...
- SQL中like的用法
操作符LIKE利用通配符把一个值与类似的值进行比较,通配符有两个: 1.百分号(%): 代表零个.一个或多个字符 2.下划线(_):代表一个数字或字符 下面的条件匹配任何以200开头的值 WHERE ...
- JS判断不能为空实例代码
JS判断不能为空实例代码.分享在此. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " ...
- c# 之Web.config
Web.config文件是一个XML文本文件,它用来储存 ASP.NET Web 应用程序的配置信息(如最常用的设置ASP.NET Web 应用程序的身份验证方式), 它可以出现在应用程序的每一个目录 ...
- servlet访问路径的写法
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://w ...
- y=x^2 vs y=x^(1/2)
[y=x^2 vs y=x^(1/2)] y=x^2,基础函数,废话不多说. y=x^(1/2),指数变成了上式的倒数.x^(1/2)即是,√x.但函数图像会是什么样呢?可以把y=x^(1/2),转变 ...
- git 常见报错
1. refusing to merge unrelated histories : 拒绝合并无关的历史 teminal中输入 git pull origin master --allow-unrel ...
- shell编程9*9乘法表
</pre>脚本内容<pre name="code" class="plain">#!/bin/bash for i in " ...
- SQLite介绍
优点:轻量级.绿色组件.单一文件.跨平台.查询效率极高.使用事务插入速度极快.支持limit分页. 适合查询速度要求较高,内存占用较少的场合,尤其是嵌入式操作系统,如各种手机操作系统,低并发web(9 ...
- Ubuntu下U盘只读文件系统,图标上锁,提示无法修改
资料来源于网络,自己总结 问题 Ubuntu下有时候插入U盘,发现不能修改其中的内容.例如不能新建文件和文件夹,不能向U盘中复制文件等,系统提示:只读文件系统. 原因大概是U盘的文件系统信息出错(保存 ...