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实现UTF8编码转换成gb2312编码
Dec 22 Javascript
Javascript实例教程(19) 使用HoTMetal(5)
Dec 23 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
javascript标准库(js的标准内置对象)总结
May 26 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 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生成CSV文件简单示例
2016/12/21 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
JavaScript如何操作css
2020/10/24 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
Python实现快速计算词频功能示例
2018/06/25 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
Python partial函数原理及用法解析
2019/12/11 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
简约控的天堂:The Undone
2016/12/21 全球购物
小学生自我评价范文
2014/01/25 职场文书
秋季运动会活动方案
2014/02/05 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
怎样写离婚协议书
2014/09/10 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书