在表单验证中使用 'ng-pattern' 和 'ng-match'答案

【问题标题】：The use of 'ng-pattern' with 'ng-match' in form validation在表单验证中使用 'ng-pattern' 和 'ng-match'
【发布时间】：2017-10-03 18:01:47
【问题描述】：

您好，我正在尝试创建一个带有密码和确认密码输入的简单表单。

我发现 'ng-pattern' 和 'ng-match' 不能很好地搭配使用。直到密码标签没有填充值，直到它匹配 ng-pattern 限制，他在本地范围内是空的，因为密码标签和确认密码之间的 'ng-match' 指令标记我总是看到一个错误“错误密码不多”，即使它们是相同的。

有没有办法解决这个问题？

谢谢

  $scope.ok = function (){};
  $scope.password = '';
  $scope.confirmPassword = '';
  $scope.passwordRegex ='(?!^[0-9]*$)(?!^[a-zA-Z]*$)^([a-zA-Z0-9]{6,})$';

<form name="form" class="form-horizontal" novalidate>
  <div class="form-group">
     <label> Password: </label>                      
     <input name="password" type="password" 
     placeholder="Password" required
     ng-model="password"
     ng-pattern="passwordRegex" />
  </div>
  <div ng-show="form.$submitted && form.password.$invalid">
    <div ng-show="form.password.$error.required">
       RequiredField</div>
    <div ng-show="form.password.$error.pattern">
         InvalidPassword</div>
  </div> 

  <div class="form-group">
    <label>ConfirmPassword:</label>
    <input name="confirmPassword" type="password"
           placeholder="ConfirmPassword" required
           ng-model="confirmPassword"
           ng-match="password" />                             
  </div>
  <div 
  ng-show="password != confirmPassword">
       <div ng-show="form.confirmPassword.$error.match">
            PasswordMismatch</div>
      </div>
  <div ng-show="form.$submitted &&
  form.confirmPassword.$invalid">
       <div ng-show="form.confirmPassword.$error.required">
       RequiredField</div>
  </div>
  
   <button type="submit" ng-click="!form.$invalid && 
   testCtrl.ok()">Ok</button>
  </form>

【问题讨论】：

如何使用 style={{passwd1==passwd2?'border:1px solid red':''}}
如果它们不相等并且不是原始的，您还可以使用 ng-if 在单独的 div 中显示错误消息。并使用 ng-pattern 检查密码是否符合模式
我已经尝试以最简单的方式看到它。在我的 HTML 中，我将绑定数据放在 {{password}} 和 {{confirmedPassword}} 中，然后我输入了。当我输入密码输入时，直到我不匹配正则表达式模式，我才在我的视图中看到它。当我在确认输入中输入内容时，我同时看到它。

标签： html angularjs forms validation ng-pattern

【解决方案1】：

在您的代码中进行以下更改：-

改变你的

<div ng-show="password != confirmPassword">
       <div ng-show="form.confirmPassword.$error.match">
            PasswordMismatch</div>
      </div>

到这里：-

<span ng-if="confirmPassword !== password" 
      ng-show="form.confirmPassword.$dirty">
      Password Mismatch!  
</span>

你需要在你的确认密码 div 标签中添加这个

<div ng-class="{'has-error' : userForm.confpwd.$invalid && 
                !userForm.confpwd.$pristine}" >
</div>

删除正则表达式开头和结尾的单引号并将其更改为：-

$scope.passwordRegex =/^(?!^[0-9]$)(?!^[a-zA-Z]$)^([a-zA-Z0- 9]{6,})$/;

这样做应该可以解决您的问题。

【讨论】：

@user24136 这个答案对您没有任何帮助吗？