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

时间:2016-10-27    点击:130   

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/

js基础之DOM中document对象的常用属性方法详解
JavaScript中访问id对象 属性的方式访问属性(实例代码)
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
使用json来定义函数,在里面可以定义多个函数的实现方法
JS函数修改html的元素内容,及修改属性内容的方法
> 返回     
地址:上海市普陀区胶州路941号长久商务中心 电话: QQ:
© Copyright 2012 上海网络 Product All Rights Reserved