基于Bootstrap 4与AngularJS的表单校验实现技术问询

嘿，刚好我对这个场景熟得很，结合你的三个需求，我整理了一套完整的实现方案，直接就能用：

1. 先理清Bootstrap 4的样式变化 #

旧版Bootstrap的has-error在Bootstrap 4里已经被替换成了is-invalid类，错误提示要放在invalid-feedback容器里，这样才能和Bootstrap的原生样式联动。所以咱们的ng-class判断要改成针对表单控件的，form-group还是要保留，这是Bootstrap的表单布局基础类。

2. 完整代码实现 #

HTML部分 #

<div ng-app="formApp" ng-controller="formController">
  <form name="userForm" novalidate>
    <!-- 邮箱输入框 -->
    <div class="form-group">
      <label for="email">邮箱</label>
      <input 
        type="email" 
        name="email" 
        class="form-control" 
        ng-model="user.email" 
        required
        ng-class="{'is-invalid': userForm.email.$invalid && userForm.email.$touched}"
      >
      <!-- 不同错误提示 -->
      <div class="invalid-feedback" ng-show="userForm.email.$touched && userForm.email.$error.required">
        邮箱不能为空哦
      </div>
      <div class="invalid-feedback" ng-show="userForm.email.$touched && userForm.email.$error.email">
        请输入正确格式的邮箱地址
      </div>
    </div>

    <!-- 密码输入框 -->
    <div class="form-group">
      <label for="password">密码</label>
      <input 
        type="password" 
        name="password" 
        class="form-control" 
        ng-model="user.password" 
        required
        minlength="6"
        ng-class="{'is-invalid': userForm.password.$invalid && userForm.password.$touched}"
      >
      <div class="invalid-feedback" ng-show="userForm.password.$touched && userForm.password.$error.required">
        密码不能为空
      </div>
      <div class="invalid-feedback" ng-show="userForm.password.$touched && userForm.password.$error.minlength">
        密码长度不能少于6位
      </div>
    </div>

    <!-- 确认密码输入框（自定义校验） -->
    <div class="form-group">
      <label for="confirmPassword">确认密码</label>
      <input 
        type="password" 
        name="confirmPassword" 
        class="form-control" 
        ng-model="user.confirmPassword" 
        required
        match-password="user.password"
        ng-class="{'is-invalid': userForm.confirmPassword.$invalid && userForm.confirmPassword.$touched}"
      >
      <div class="invalid-feedback" ng-show="userForm.confirmPassword.$touched && userForm.confirmPassword.$error.required">
        请确认密码
      </div>
      <div class="invalid-feedback" ng-show="userForm.confirmPassword.$touched && userForm.confirmPassword.$error.matchPassword">
        两次输入的密码不一致
      </div>
    </div>

    <!-- 提交按钮 -->
    <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">提交</button>
  </form>
</div>

JavaScript部分 #

angular.module('formApp', [])
.controller('formController', function($scope) {
  // 初始化用户对象
  $scope.user = {};
})
// 自定义密码比对校验指令
.directive('matchPassword', function() {
  return {
    require: 'ngModel',
    scope: {
      matchPassword: '=' // 绑定要比对的密码字段
    },
    link: function(scope, element, attrs, ngModel) {
      // 添加自定义校验器
      ngModel.$validators.matchPassword = function(modelValue) {
        // 比对当前输入值和目标密码值
        return modelValue === scope.matchPassword;
      };

      // 当目标密码变化时，重新校验当前字段
      scope.$watch('matchPassword', function() {
        ngModel.$validate();
      });
    }
  };
});

3. 核心功能拆解 #

• 触达后校验：通过userForm.email.$touched判断用户是否已经点击过输入框（失去焦点），只有当$touched和$invalid同时为true时，才会给输入框加上is-invalid类，显示错误提示。
• 不同错误提示：利用AngularJS表单字段的$error对象，分别判断$error.required（必填错误）、$error.email（邮箱格式错误）、$error.minlength（长度不足错误）等，针对性显示不同提示文本。
• 自定义密码比对：通过AngularJS的自定义指令matchPassword，给确认密码字段添加自定义校验规则，并且监听密码字段的变化，实时触发校验，确保两次输入一致。

4. 小提示 #

• 别忘了加上novalidate属性在form标签上，禁用浏览器的原生表单校验，这样才能完全用AngularJS的校验逻辑。
• Bootstrap 4的invalid-feedback默认是隐藏的，只有当对应的输入框有is-invalid类时才会显示，完美契合我们的需求。

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