AngularJS表单校验用法示例，新手如何快速掌握？

AngularJS 作为一款经典的前端框架，其表单校验功能为开发者提供了便捷的数据校验方案，通过内置的校验指令和属性，开发者可以轻松实现客户端数据校验，提升用户体验并减少无效数据提交，本文将详细介绍 AngularJS 表单校验的核心用法，包含常用指令、校验规则及实际示例。

表单校验基础概念

AngularJS 的表单校验主要依赖于 ng-model 指令与校验指令的结合，当表单元素绑定 ng-model 后，AngularJS 会自动为该元素添加校验属性，如 $valid（有效）、$invalid（无效）、$dirty（已修改）、$pristine（未修改）等，这些属性可用于动态控制表单元素的样式和显示状态。

常用校验指令及属性

AngularJS 提供了多种内置校验指令，覆盖常见的校验需求：

表单校验状态控制

通过 AngularJS 提供的校验状态属性，可以动态控制表单元素的样式和提示信息：

<form name="userForm">
  <div>
    <label>用户名：</label>
    <input type="text" name="username" ng-model="user.username" required ng-minlength="3">
    <span ng-show="userForm.username.$error.required">用户名不能为空</span>
    <span ng-show="userForm.username.$error.minlength">用户名至少3个字符</span>
  </div>
</form>

在上述示例中：

• ng-show="userForm.username.$error.required"：当用户名未填写时显示提示
• ng-show="userForm.username.$error.minlength"：当用户名长度不足时显示提示
• $dirty：当用户修改过输入框时触发
• $pristine：当用户未修改过输入框时触发

整体表单校验示例

以下是一个完整的用户注册表单校验示例,包含必填项、长度限制、邮箱格式等校验：

<div ng-app="myApp" ng-controller="FormController">
  <form name="registrationForm" novalidate>
    <div class="form-group">
      <label>用户名：</label>
      <input type="text" name="username" ng-model="user.username" required ng-minlength="3" ng-maxlength="10">
      <span class="error" ng-show="registrationForm.username.$dirty && registrationForm.username.$invalid">
        <span ng-show="registrationForm.username.$error.required">用户名不能为空</span>
        <span ng-show="registrationForm.username.$error.minlength">至少3个字符</span>
        <span ng-show="registrationForm.username.$error.maxlength">最多10个字符</span>
      </span>
    </div>
    <div class="form-group">
      <label>邮箱：</label>
      <input type="email" name="email" ng-model="user.email" required>
      <span class="error" ng-show="registrationForm.email.$dirty && registrationForm.email.$invalid">
        <span ng-show="registrationForm.email.$error.required">邮箱不能为空</span>
        <span ng-show="registrationForm.email.$error.email">邮箱格式不正确</span>
      </span>
    </div>
    <div class="form-group">
      <label>密码：</label>
      <input type="password" name="password" ng-model="user.password" required ng-minlength="6">
      <span class="error" ng-show="registrationForm.password.$dirty && registrationForm.password.$invalid">
        <span ng-show="registrationForm.password.$error.required">密码不能为空</span>
        <span ng-show="registrationForm.password.$error.minlength">至少6个字符</span>
      </span>
    </div>
    <button type="submit" ng-disabled="registrationForm.$invalid">提交</button>
  </form>
</div>

对应的 JavaScript 控制器代码：

angular.module('myApp', [])
  .controller('FormController', function($scope) {
    $scope.user = {
      username: '',
      email: '',
      password: ''
    };
  });

校验样式优化

通过 AngularJS 的校验状态类名，可以为表单元素添加不同的样式：

input.ng-invalid.ng-dirty {
  border-color: #a94442;
}
input.ng-valid.ng-dirty {
  border-color: #3c763d;
}
.error {
  color: #a94442;
  font-size: 12px;
  margin-top: 5px;
}

AngularJS 的表单校验功能通过简洁的指令和属性，实现了强大的客户端校验能力，开发者可以结合 ng-model、校验指令及状态属性，构建出用户体验良好的表单校验逻辑，在实际项目中，建议结合后端校验，确保数据的安全性，掌握这些基础用法后，开发者还可以进一步探索自定义校验指令，满足更复杂的业务需求。