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

我已经从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>

此字段为必填字段
密码不匹配

那么，如何显示

密码

和

确认密码

的自定义消息，就像

电子邮件

文件一样

---

由于您的自定义指令将验证键设置为

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>

---

演示：

请查看下面的链接

以下是匹配密码的指令

指示

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

密码
请输入密码。
密码应包含6至15个字母和数字字符
确认密码
密码不匹配。

---

希望这就是您想要的。

好的，谢谢。此外，对于密码确认，我需要在HTML中添加什么？与密码验证相同，它应该是

密码不匹配

Ops，我应该理解我必须添加“passwordVerify”，因为我使用了ctrl.$setValidity（“passwordVerify”，true）；再次感谢！是，

$setValidity

将相应的键设置为

$error

对象。

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);
         });
     }
 };
})

<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>