在前端开发中，表单验证是非常重要的一环。AngularJS 提供了丰富的表单验证方法，可以帮助开发者快速实现表单验证。本文将详细介绍 AngularJS 中 form 表单的验证方法，包括如何定义表单、如何定义验证规则以及如何显示错误信息等。
定义表单
在 AngularJS 中，我们可以使用 ng-form 指令来定义表单。ng-form 指令可以嵌套在其他表单中，用于分组验证。同时，ng-form 指令也可以单独使用，用于单个表单的验证。下面是一个简单的表单定义示例：
<ng-form name="myForm"> <label for="username">用户名：</label> <input type="text" id="username" name="username" ng-model="user.username" required> <label for="password">密码：</label> <input type="password" id="password" name="password" ng-model="user.password" required> <button type="submit" ng-disabled="myForm.$invalid">提交</button> </ng-form>
在上面的示例中，我们使用 ng-form 指令来定义了一个名为 myForm 的表单。表单中包含了两个输入框和一个提交按钮。其中，每个输入框都使用了 ng-model 指令来绑定数据模型，required 属性用于指定输入框为必填项。提交按钮则使用了 ng-disabled 指令来禁用，只有当表单验证通过时才能点击。
定义验证规则
在 AngularJS 中，我们可以使用 ng-model 指令来定义输入框的数据模型，同时也可以使用 ng-pattern 指令来定义输入框的验证规则。下面是一个示例：
<ng-form name="myForm">
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" ng-model="user.email" ng-pattern="/^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/i" required>
<button type="submit" ng-disabled="myForm.$invalid">提交</button>
</ng-form>在上面的示例中，我们使用 ng-pattern 指令来定义了一个邮箱验证规则。正则表达式 /^[a-z]+[a-z0-9._]+@[a-z]+.[a-z.]{2,5}$/i 表示邮箱地址必须以字母开头，可以包含字母、数字、下划线和点号，中间必须包含一个 @ 符号，后面必须是一个域名，域名可以包含字母和点号，但是最后一个点号后面必须是两到五个字母。如果用户输入的邮箱地址不符合这个规则，就会显示错误信息。
除了 ng-pattern 指令外，AngularJS 还提供了很多其他的验证规则，如 ng-minlength、ng-maxlength、ng-required、ng-pattern、ng-email、ng-url 等。开发者可以根据实际需要选择合适的验证规则。
显示错误信息
在 AngularJS 中，我们可以使用 ng-show 指令来显示错误信息。下面是一个示例：
<ng-form name="myForm">
<label for="phone">手机号码：</label>
<input type="tel" id="phone" name="phone" ng-model="user.phone" ng-pattern="/^1[3|4|5|7|8][0-9]{9}$/" required>
<div ng-show="myForm.phone.$error.required">手机号码不能为空</div>
<div ng-show="myForm.phone.$error.pattern">手机号码格式不正确</div>
<button type="submit" ng-disabled="myForm.$invalid">提交</button>
</ng-form>在上面的示例中，我们使用 ng-show 指令来显示了两个错误信息。如果用户没有输入手机号码，就会显示“手机号码不能为空”的错误信息；如果用户输入的手机号码格式不正确，就会显示“手机号码格式不正确”的错误信息。在 ng-show 指令中，我们使用了 myForm.phone.$error.required 和 myForm.phone.$error.pattern 两个变量来判断当前输入框的状态。如果这两个变量为 true，就表示当前输入框的验证不通过。
总结
AngularJS 中的表单验证非常强大，可以帮助开发者快速实现表单验证。在定义表单时，我们可以使用 ng-form 指令来定义表单，使用 ng-model 指令来绑定数据模型。在定义验证规则时，我们可以使用 ng-pattern、ng-minlength、ng-maxlength、ng-required、ng-email、ng-url 等指令来定义不同的验证规则。在显示错误信息时，我们可以使用 ng-show 指令来根据当前输入框的状态来显示不同的错误信息。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658f4fb8eb4cecbf2d4f56e2