当前位置：首页 > 主机动态 > 正文

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

admin
主机动态
2025-11-03
2848

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

表单校验基础概念

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

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

常用校验指令及属性

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

校验指令	作用	示例
required	设置字段为必填	<input type="text" ng-model="user.name" required>
ng-minlength	设置最小长度	<input type="text" ng-model="user.password" ng-minlength="6">
ng-maxlength	设置最大长度	<input type="text" ng-model="user.age" ng-maxlength="3">
pattern	使用正则表达式校验	<input type="email" ng-model="user.email" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}">
type="email"	内置邮箱格式校验	<input type="email" ng-model="user.email">
type="number"	内置数字类型校验	<input type="number" ng-model="user.score">

表单校验状态控制

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

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

在上述示例中：

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

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、校验指令及状态属性，构建出用户体验良好的表单校验逻辑，在实际项目中，建议结合后端校验，确保数据的安全性，掌握这些基础用法后，开发者还可以进一步探索自定义校验指令，满足更复杂的业务需求。