Question

我已经构建了一个from并尝试使用angularjs实现验证过程。在我的源代码中，您将看到我有三个输入字段：

电子邮件
密码
确认密码

在电子邮件中，我可以通过以下方式显示'必填邮件'和'自定义邮件'：

 <input type="email" class="form-control" id="inputEmail" name="inputEmail" placeholder="Email" ng-model="email" required>
<p ng-show="createLogin.inputEmail.$error.required">This field is required</p>
<p ng-show="createLogin.inputEmail.$error.email">Enter a valid email<p>

这完全没问题。但是，在其他两个输入字段（密码和确认密码）上执行相同的步骤，我无法显示'自定义消息'！仅显示'必需消息'。我怎样才能解决这个问题？这是我用于密码的代码：

<input type="password" class="form-control" id="createPassword" name="createPassword" placeholder="Password" ng-model="password" password-validate required>
<div ng-show="createLogin.createPassword.$error.required"><p>This field is required</p></div>
<div ng-show="createLogin.createPassword.$error.password">
     <p>Custom Messages:</p>
 </div>

确认密码：

<input type="password" class="form-control" id="confirmPassword" name="confirmPassword" placeholder="Password" ng-model="verifyPass" required data-password-verify="password">
<p ng-show="createLogin.confirmPassword.$error.required">This field is required</p>
<p ng-show="createLogin.confirmPassword.$error.verifyPass">Password don't match<p>

那么，我怎样才能显示Password和Confirm Password提交的自定义消息，就像提交Email一样？

Here is my Plunker work

Answer 1

由于您的自定义指令将验证密钥设置为pwd（ctrl.$setValidity('pwd', true)），因此您需要在HTML中使用它，例如：

<div ng-show="createLogin.createPassword.$error.pwd">
    <p>Password must meet the following requirements:</p>
    <ul>
        <li ng-class="pwdHasLetter">At least <strong>one letter</strong></li>
        <li ng-class="pwdHasNumber">At least <strong>one number</strong></li>
        <li ng-class="pwdValidLength">Be at least <strong>8 characters</strong></li>
    </ul>
</div>

密码验证字段的相同问题，密钥应为passwordVerify：

<p ng-show="createLogin.confirmPassword.$error.passwordVerify">Password don't match</p>

演示：http://plnkr.co/edit/zMbCxcdkYggOdvXYkMX1?p=preview

Answer 2

请查看以下链接

http://plnkr.co/edit/iSFp3n4PSDTM6pRofXc2

以下是匹配密码的指令。

指令

app.directive('pwdMatch', function () {
 return {
     require: 'ngModel',
     restrict: 'A',
     scope: {
         pwdMatch: '='
     },
     link: function (scope, elem, attrs, ctrl) {
         scope.$watch(function () {
             var modelValue = ctrl.$modelValue || ctrl.$$invalidModelValue;
             return (ctrl.$pristine && angular.isUndefined(modelValue)) || scope.pwdMatch === modelValue;
         }, function (currentValue) {
             ctrl.$setValidity('pwdMatch', currentValue);
         });
     }
 };
})

HTML

<div class="form-group">
      <label for="password" class="col-sm-4 control-label">Password</label>

      <div class="col-sm-8">
          <input type="password" class="form-control" id="password" placeholder="Enter password"
                       ng-model="user.password" name="password" required="true"
                       ng-pattern="/^(?=.*[0-9])(?=.*[A-Za-z])[a-zA-Z0-9~!@#$%^&*]{6,15}$/">
          <span ng-show="signUpForm.password.$dirty && signUpForm.password.$error.required">
          <small class="text-danger">Please enter a password.</small>
          </span>
          <span ng-show="signUpForm.password.$dirty && !signUpForm.password.$error.required && signUpForm.password.$error.pattern">
            <small class="text-danger">Password should have 6 to 15 characters with alphabets and digits</small>
         </span>

      </div>
  </div>
  <div class="form-group">
    <label for="confirmPassword" class="col-sm-4 control-label">Confirm Password</label>

    <div class="col-sm-8">
        <input type="password" class="form-control" name="confirmPassword" id="confirmPassword"
                       placeholder="Confirm password" ng-model="user.confirmPassword" required="true"
                       data-pwd-match="user.password">
    <span ng-show="signUpForm.confirmPassword.$dirty && (signUpForm.confirmPassword.$error.required || signUpForm.confirmPassword.$error.pwdMatch)">
        <small class="text-danger">Passwords do not match.</small>
    </span>
    </div>
</div>

希望这就是你要找的东西。

如何在使用angularjs进行表单验证时在输入处显示不同类型的自定义消息

2 个答案: