angularjs 表单密码验证自定义指令实现代码


Posted in Javascript onOctober 27, 2016

html代码

<form name="form">
    <input type="password" name="password" ng-model="password" required placeholder="请输入密码">
    <input type="password" name="passwordConfirm" ng-model="passwordConfirm" equal-to="password" placeholder="请再次输入密码">
    <span ng-show="form.passwordConfirm.$error.equalTo">两次密码不一致</span>
  </form>

js

angular.module("Valid",[])

.directive("equalTo", function () {
  return {
    require: "ngModel",
    link: function (scope, ele, attrs, ctrl) {

      console.log(scope);//打印当前作用域
      console.log(attrs);//打印当前标签属性列表
      console.log(ctrl);//打印当前ctrl

      var target = attrs["equalTo"];//获取自定义指令属性键值

      if (target) {//判断键是否存在
        scope.$watch(target, function () {//存在启动监听其值
          ctrl.$validate()//每次改变手动调用验证
        }) 

        // 获取当前模型控制器的父控制器FormController
        var targetCtrl = ctrl.$$parentForm[target];//获取指定模型控制器
        console.log(targetCtrl)

        ctrl.$validators.equalTo = function (modelValue, viewVale) {//自定义验证器内容
          
          var targetValue = targetCtrl.$viewValue;//获取password的输入值

          return targetValue == viewVale;//是否等于passwordConfirm的值
        }

        ctrl.$formatters.push(function (value) {
          console.log("正在进行数据格式化的值:",value)
          return value;
        })

        ctrl.$parsers.push(function (value) {
          console.log("正在进行数据转换的值:",value)
          return value;
        })
      }
    }
  }
})

演示地址:https://tianyouh.github.io/angularPasswordConfirm/

Javascript 相关文章推荐
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
js单例模式详解实例
Nov 21 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
JavaScript实现网页动态生成表格
Nov 25 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 #Javascript
不使用script导入js文件的几种方法
Oct 27 #Javascript
JSON 必知必会 观后记
Oct 27 #Javascript
使用JSON作为函数的参数的优缺点
Oct 27 #Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 #Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 #Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 #Javascript
You might like
PHP实现的构造sql语句类实例
2016/02/03 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
Jquery 基础学习笔记
2009/05/29 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
python批量提交沙箱问题实例
2014/10/08 Python
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
Flask框架配置与调试操作示例
2018/07/23 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
文史专业毕业生自荐信
2013/11/17 职场文书
幼儿园家长评语
2014/02/10 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
营运督导岗位职责
2015/04/10 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL
python处理json数据文件
2022/04/11 Python