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 ...
随机推荐
- 使用GridFsTemplate在Mongo中存取文件
Maven依赖(还有一些springboot需要的) <parent> <groupId>org.springframework.boot</groupId> ...
- 史上最全的Angular.js 的学习资源
Angular.js 的一些学习资源 基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zi ...
- Creating Self-Signed SSL Certificates
http://weblogic-wonders.com/weblogic/2011/05/25/ssl-configuration-for-weblogic-server/ http://m-butt ...
- 【转】TCP、UDP数据包大小的限制
来自:https://blog.csdn.net/caoshangpa/article/details/51530685 1.概述 首先要看TCP/IP协议,涉及到四层:链路层,网络层,传输层,应用层 ...
- LevelDB Filters
[LevelDB Filters] Because of the way leveldb data is organized on disk, a single Get() call may invo ...
- Kubernetes集群向指定节点上创建容器
如果需要限制Pod到指定的Node上运行,则可以给Node打标签并给Pod配置NodeSelector. 给节点添加标签 首先查看节点信息 [root@k8s-master ~]# kubectl g ...
- node.js中的匿名函数, 回调函数和嵌套函数
定义一个函数相信大家已经很熟悉了, 在javascript里的函数也是非常重要的, 使用率非常高, 有几种函数不是很好理解 一, 匿名函数 var remove = function(num1) { ...
- mac下yii安装
下载https://github.com/yiisoft/yii2-app-advanced/releases,里边没index.php文件 1.http://www.yiichina.com/que ...
- rabbitmq 和Spring 集成 实现(一)
1.增加pom.xml依赖 <!--rabbitmq消息队列依赖架包--> <dependency> <groupId>org.springframework.am ...
- Linq多字段排序
var q = db.Customers.OrderBy(c => c.City).ThenBy(c => c.ContactName).ToList(); var q = from it ...