AngularJS：使用ng-pattern提示格式问题但不标记表单无效

这个需求太常见了——就是想给用户个格式提示，但不想因为格式不对就把表单锁死不让提交对吧？我给你两个靠谱的方案，你可以根据自己的代码习惯选：

方案一：脱离ng-pattern验证体系，自定义格式检测 #

不用依赖ng-pattern自带的验证，自己写逻辑检测格式，然后控制提示的显示，完全不影响表单的有效性状态。

模板代码 #

<form name="userForm">
  <label>输入内容：</label>
  <input 
    type="text" 
    name="contentField" 
    ng-model="vm.userInput"
    ng-keyup="vm.checkInputFormat()"
    placeholder="请按照XXX格式输入"
  >
  <!-- 用自定义的错误标志控制提示 -->
  <div ng-messages="vm.formatError" class="error-text">
    <div ng-message="invalidFormat">提示：请按照XXX格式输入哦</div>
  </div>
  <button ng-disabled="userForm.$invalid">下一步</button>
</form>

控制器代码 #

angular.module('yourApp').controller('YourController', function() {
  var vm = this;
  // 定义你的格式正则
  var inputPattern = /^[A-Z0-9]{6,12}$/;

  vm.checkInputFormat = function() {
    // 检测输入是否匹配正则，设置自定义错误标志
    vm.formatError = inputPattern.test(vm.userInput) ? null : { invalidFormat: true };
  };
});

这个方案的好处是完全独立，不会和Angular自带的验证体系冲突，想怎么调整提示逻辑都很灵活。

方案二：保留ng-pattern+ng-messages，手动移除验证对表单的影响 #

如果你不想改原来的ng-pattern写法，可以保留它来触发提示，但手动把它对表单有效性的影响去掉。核心思路是用$setValidity方法，强制把pattern验证的有效性设为true，这样就算不匹配，控件也不会被标记为invalid。

模板代码 #

<form name="userForm">
  <label>输入内容：</label>
  <input 
    type="text" 
    name="contentField" 
    ng-model="vm.userInput"
    ng-pattern="/^[A-Z0-9]{6,12}$/"
    placeholder="请按照XXX格式输入"
  >
  <!-- 还是用原来的ng-messages显示pattern错误 -->
  <div ng-messages="userForm.contentField.$error" class="error-text">
    <div ng-message="pattern">提示：请按照XXX格式输入哦</div>
  </div>
  <button ng-disabled="userForm.$invalid">下一步</button>
</form>

控制器代码 #

angular.module('yourApp').controller('YourController', function($scope) {
  // 监听控件的pattern错误状态
  $scope.$watch('userForm.contentField.$error.pattern', function(isPatternInvalid) {
    if (isPatternInvalid) {
      // 强制把pattern验证的有效性设为true，不让它影响表单
      $scope.userForm.contentField.$setValidity('pattern', true);
    }
  });
});

这个方案改动最小，几乎保留了你原来的写法，只是加了个watch来“抵消”ng-pattern对表单有效性的影响。

注意事项 #

• 如果你还有其他必填、email之类的验证，这些正常的验证还是会让表单$invalid，不影响你原来的表单校验逻辑
• 提示样式可以自己调整，比如加个红色字体，让用户一眼看到

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