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 相关文章推荐
基于jquery实现的表格分页实现代码
Jun 21 Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
文本框回车提交与禁止提交示例
Sep 27 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
深入浅析JavaScript函数前面的加号和叹号
Jul 09 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
vue实现图片上传到后台
Jun 29 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简单提示框alert封装函数
2010/08/08 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
python数据挖掘需要学的内容
2019/06/23 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
Python 实现try重新执行
2019/12/21 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
杭州时比特电子有限公司SQL
2013/08/22 面试题
大学生旅游业创业计划书
2014/01/29 职场文书
鉴定评语大全
2014/05/05 职场文书
2014年行政工作总结
2014/11/19 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
python实现股票历史数据可视化分析案例
2021/06/10 Python
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android