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 UI-Draggable 参数集合
Jan 10 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
javaScript同意等待代码实现心得
Jan 01 Javascript
javascript模拟select,jselect的方法实现
Nov 08 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
深入理解Vuex 模块化(module)
Sep 26 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
Feb 05 Javascript
JavaScript中如何调用Java方法
Sep 16 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 伪静态之IIS篇
2014/06/02 PHP
php判断访问IP的方法
2015/06/19 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
JSON取值前判断
2014/12/23 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
js replace 全局替换的操作方法
2018/06/12 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
Python多线程获取返回值代码实例
2020/02/17 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
"引用"与多态的关系
2013/02/01 面试题
文化宣传方案
2014/03/13 职场文书
餐饮采购员岗位职责
2014/03/15 职场文书
事业单位鉴定材料
2014/05/25 职场文书
环境保护标语
2014/06/20 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
个人原因辞职信模板
2015/05/13 职场文书
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python
Go语言读取txt文档的操作方法
2022/01/22 Golang