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

 更新时间:2016年10月27日 22:57:26   投稿:mdxy-dxy  
这篇文章主要介绍了angularjs 表单密码验证自定义指令实现代码,需要的朋友可以参考下

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/

相关文章

  • Angularjs 滚动加载更多数据

    Angularjs 滚动加载更多数据

    AngularJS 通过新的属性和表达式扩展了 HTML。本文主要给大家介绍Angularjs 滚动加载更多数据的相关知识,需要的朋友参考下吧
    2016-03-03
  • Angular中点击li标签实现更改颜色的核心代码

    Angular中点击li标签实现更改颜色的核心代码

    这篇文章主要介绍了Angular中点击li标签实现更改颜色的核心代码,需要的朋友可以参考下
    2017-12-12
  • Angular2学习笔记之数据绑定的示例代码

    Angular2学习笔记之数据绑定的示例代码

    本篇文章主要介绍了Angular2学习笔记之数据绑定的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Angular ng-class详解及实例代码

    Angular ng-class详解及实例代码

    这篇文章主要介绍了Angular ng-class的知识,并整理了相关资料,有兴趣的小伙伴可以参考下
    2016-09-09
  • Angular.js中定时器循环的3种方法总结

    Angular.js中定时器循环的3种方法总结

    这篇文章主要给大家总结了angular.js中定时器循环的3种方法,分别是利用$interlval实现、$timeout的递归调用来实现以及$timeout借助arguments.callee来实现,每种方法都给出了详细的示例艾玛供大家学习参考,需要的朋友们下面跟着小编一起来学习学习吧。
    2017-04-04
  • Angular组件化管理实现方法分析

    Angular组件化管理实现方法分析

    这篇文章主要介绍了Angular组件化管理实现方法,结合具体实例分析了Angular模块组件化管理以提高代码复用性的实现方法与相关操作技巧,需要的朋友可以参考下
    2017-03-03
  • Angular 结合 dygraphs 实现 annotation功能

    Angular 结合 dygraphs 实现 annotation功能

    这篇文章主要介绍了Angular 结合 dygraphs 实现 annotation,本文,我们直接结合 Angular 来演示,如何通过 dygraphs 实现折线图上的 annotation 的功能,需要的朋友可以参考下
    2022-08-08
  • angularjs 的数据绑定实现原理

    angularjs 的数据绑定实现原理

    本篇文章主要介绍了angularjs 的数据绑定实现原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Angularjs实现数组随机排序的方法

    Angularjs实现数组随机排序的方法

    今天小编就为大家分享一篇Angularjs实现数组随机排序的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • AngularJS基础 ng-href 指令用法

    AngularJS基础 ng-href 指令用法

    本文主要介绍AngularJS ng-href 指令,这里对ng-href 基础资料进行详细介绍,并附代码实例,有兴趣的小伙伴可以参考下
    2016-08-08

最新评论