AngularJS密码验证问题：允许$符号但同密码仍报错

嘿，我遇过类似的坑！当密码里包含$符号时，AngularJS的表达式解析或者验证逻辑容易踩坑，导致明明密码一致却报错。咱们一步步来解决：

核心问题排查 #

首先大概率是你的验证逻辑没正确处理特殊字符，要么是ng-pattern没允许$，要么是直接用模板表达式判断时，Angular对$的特殊解析搞的鬼。

1. 先检查密码格式限制（ng-pattern） #

如果你用了ng-pattern来限制密码允许的字符，一定要确保正则里包含$！比如：

<input type="password" name="password" ng-model="password" 
       ng-pattern="/^[a-zA-Z0-9$@#%^&*()_+=-]+$/" required>

这里的正则明确把$加入了允许的字符列表，不然即使密码匹配，也会因为格式不通过报错。

2. 最靠谱的方案：自定义密码匹配指令 #

直接用模板表达式判断（比如password != confirmPassword）有时候会因为Angular对$的特殊处理出问题，推荐写个自定义指令来做匹配，彻底避开这个坑：

第一步：定义指令

angular.module('myApp', [])
.directive('passwordMatch', function() {
  return {
    require: 'ngModel',
    scope: {
      otherModelValue: '=passwordMatch'
    },
    link: function(scope, element, attrs, ngModel) {
      // 直接做字符串全等比较，不管啥特殊字符都能正确判断
      ngModel.$validators.match = function(modelValue) {
        return modelValue === scope.otherModelValue;
      };

      // 当确认密码变化时，重新验证原密码
      scope.$watch('otherModelValue', function() {
        ngModel.$validate();
      });
    }
  };
});

第二步：在模板中使用

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp">
  <form id="registerform" class="form-horizontal" role="form" novalidate name="registrationForm">
    <!-- 密码输入框 -->
    <div style="margin-bottom: 25px" ng-class="{ 'has-error' : registrationForm.password.$dirty && registrationForm.password.$invalid }">
      <label>密码</label>
      <input type="password" name="password" ng-model="user.password" 
             ng-pattern="/^[a-zA-Z0-9$@#%^&*()_+=-]+$/" required>
      <span ng-show="registrationForm.password.$error.pattern">密码可包含字母、数字和$@#等特殊字符</span>
    </div>

    <!-- 确认密码输入框 -->
    <div style="margin-bottom: 25px" ng-class="{ 'has-error' : registrationForm.confirmPassword.$dirty && registrationForm.confirmPassword.$invalid }">
      <label>确认密码</label>
      <input type="password" name="confirmPassword" ng-model="user.confirmPassword" 
             password-match="user.password" required>
      <span ng-show="registrationForm.confirmPassword.$error.match">密码与确认密码不一致</span>
    </div>
  </form>
</div>
</body>
</html>

为什么之前的写法会失效？ #

如果你之前是直接在模板里写类似registrationForm.password.$viewValue != registrationForm.confirmPassword.$viewValue，理论上不该有问题，但如果你的代码里不小心用了$parse服务，或者把$viewValue写错了，Angular会把$当成内置特殊变量解析，导致判断出错。而自定义指令的方式直接做字符串比较，完全绕开了表达式解析的坑。

额外小提醒 #

• 别用空的ng-app=""，自定义个模块名（比如上面的myApp），避免全局污染
• 验证提示要结合$dirty，别页面一加载就显示错误，影响用户体验
• 如果不需要限制密码格式，直接去掉ng-pattern就行

内容的提问来源于stack exchange，提问作者ashokbalaga