AngularJS 输入验证学习笔记

在AngularJS中，我们可以通过内置指令和自定义指令来实现输入验证。下面将介绍几种常用的输入验证方式。

必填项验证

对于必填项，我们可以使用 required 指令进行验证。当input元素中设置了 required 属性时，输入框内容为空时提交表单会弹出警告框提示用户必须填写该项。

htmlCopy Code
<form>
  <label for="username">用户名:</label>
  <input id="username" type="text" name="username" required>
  <input type="submit" value="提交">
</form>

最小长度验证

我们可以使用 ng-minlength 指令来限制输入字符串的最小长度。

htmlCopy Code
<form name="myForm">
  <label for="password">密码:</label>
  <input id="password" type="password" name="password" ng-minlength="6">
  <span class="error" ng-show="myForm.password.$error.minlength">密码长度至少需要6个字符。</span>
</form>

在上述代码中，如果密码长度不足6个字符，页面会显示错误提示。

密码匹配验证

我们可以使用 ng-model 和 ng-repeat 指令实现两次密码输入要一致的验证。

htmlCopy Code
<form name="myForm">
  <label for="password">密码:</label>
  <input id="password" type="password" name="password" ng-model="user.password">
  <label for="confirmPassword">确认密码:</label>
  <input id="confirmPassword" type="password" name="confirmPassword" ng-model="user.confirmPassword">
  <span class="error" ng-show="myForm.confirmPassword.$error.match">两次输入的密码不一致。</span>
</form>

在上述代码中，我们使用 ng-model 指令分别将两次输入的密码值绑定到 user.password 和 user.confirmPassword ，然后使用 ng-repeat 指令来绑定错误提示信息。

自定义验证器

如果使用内置指令无法满足我们的需求，我们可以自定义指令实现输入验证。下面以手机号码为例，介绍如何自定义指令。

htmlCopy Code
<form name="myForm">
  <label for="phone">手机号码:</label>
  <input id="phone" type="text" name="phone" ng-model="user.phone" check-phone>
  <span class="error" ng-show="myForm.phone.$error.phone">请输入正确格式的手机号码。</span>
</form>

在上述代码中，我们在input元素上使用了 check-phone 自定义指令，并设置了 ng-model 属性将用户输入的手机号码绑定到 user.phone 对象上。接下来，我们需要在AngularJS中定义该自定义指令。

javascriptCopy Code
angular.module('myApp', [])
  .directive('checkPhone', function() {
    var PHONE_REGEXP = /^1\d{10}$/;
    return {
      require: 'ngModel',
      link: function(scope, elm, attrs, ctrl) {
        ctrl.$validators.phone = function(modelValue, viewValue) {
          if (ctrl.$isEmpty(modelValue)) {
            return true;
          }
          if (PHONE_REGEXP.test(viewValue)) {
            return true;
          }
          return false;
        };
      }
    };
  });

在上述代码中，我们通过 ngModel 指令的 require 属性来获取该input元素绑定的 NgModelController 控制器实例，并使用 $validators 对象自定义了一个名为 phone 的验证器函数。该验证器函数首先判断输入框是否为空，如果为空则认为该输入框合法；否则，则使用 PHONE_REGEXP 正则表达式来验证手机号码格式是否正确。如果验证通过，则返回true，否则返回false。

总结

AngularJS提供了丰富的输入验证指令和自定义指令，能够满足大部分的输入验证需求。在实际开发中，我们可以根据具体需求来选择合适的方式进行输入验证。