密码和确认密码一致的Angularjs验证

最新推荐文章于 2023-05-12 17:28:54 发布

fishermanmax

最新推荐文章于 2023-05-12 17:28:54 发布

阅读量3.8k

点赞数

分类专栏： AngularJs

AngularJs 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用AngularJS自定义指令实现密码输入框的一致性校验。通过编写一个简单的示例，展示了如何定义和使用名为`pwCheck`的自定义指令来确保两个密码输入框内的内容一致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<input type='password' id='pw1' name='pw1'
  ng-model='pw1' ng-required/>
<input type='password' id='pw2' name='pw2'
  ng-model='pw2' ng-required pw-check='pw1'/>

指令定义部分:

angular.module('myApp.directives', [])
  .directive('pwCheck', [function () {
    return {
      require: 'ngModel',
      link: function (scope, elem, attrs, ctrl) {
        var firstPassword = '#' + attrs.pwCheck;
        elem.add(firstPassword).on('keyup', function () {
          scope.$apply(function () {
            var v = elem.val()===$(firstPassword).val();
            ctrl.$setValidity('pwmatch', v);
          });
        });
      }
    }
  }]);
错误提示<div class='msg-block' ng-show='myForm.$error'>
  <span class='msg-error' ng-show='myForm.pw2.$error.pwmatch'>
    Passwords don't match.
  </span>
</div>