所谓手动验证是通过AngularJS表单的属性来验证，而成为AngularJS表单必须满足两个条件：
1、给form元素加上novalidate=”novalidate”；
2、给form元素加上name=”theForm”，
如下：
<!DOCTYPE html>
<html lang="en" ng-app="myApp1">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/
在AngularJS中，表单验证是一项关键功能，它允许开发者在用户输入数据时实时检查其有效性，从而提高用户体验和数据质量。手动表单验证是指不依赖浏览器内置的HTML5验证机制，而是通过AngularJS的特性来实现。本篇文章将详细探讨AngularJS手动表单验证的原理、设置以及常见验证规则。
要创建一个AngularJS表单，需要满足两个条件。第一，添加`novalidate="novalidate"`属性到`<form>`标签中，这样可以禁用浏览器默认的HTML5表单验证。第二，为`<form>`元素设置`name`属性，例如`name="theForm"`，这使得表单成为AngularJS作用域中的一个对象，可以通过`$scope.theForm`访问。
下面是一个简单的示例：
```html
<form ng-submit="onSubmit(theForm.$valid)" novalidate="novalidate" name="theForm">
```
在这个例子中，`ng-submit`指令用于在表单提交时调用控制器中的`onSubmit`函数，传入`theForm.$valid`作为参数，该参数表示表单的整体有效性。`$valid`属性会根据表单中所有字段的验证状态自动计算。
接下来，我们将讨论如何在AngularJS中添加验证规则。每个输入字段都可以通过`ng-model`与模型关联，并且可以包含一些特定的属性来进行验证，如`required`、`minlength`、`maxlength`等。例如：
```html
<input type="email" class="form-control" id="email" ng-model="formModel.email" required="required" name="email"/>
```
在上面的例子中，`required`属性确保电子邮件字段不能为空，而`type="email"`则要求输入的是有效的电子邮件格式。如果输入不符合这些规则，AngularJS会自动更新表单的状态。
AngularJS提供了`$error`对象来检查每个字段的验证状态。例如，对于电子邮件字段，可以检查`$error.required`和`$error.email`来显示相应的错误信息：
```html
<p class="help-block" ng-show="theForm.email.$error.required && (!theForm.$pristine || theForm.$submitted)">必填</p>
<p class="help-block" ng-show="theForm.email.$error.email && (!theForm.$pristine || theForm.$submitted)">email格式不正确</p>
```
`$pristine`属性表示字段是否已被用户修改过，而`$submitted`属性表示表单是否已提交。这两个属性与错误信息一起使用，可以控制何时显示错误提示。
除了内置的验证规则，AngularJS还支持自定义验证器，通过`ng-pattern`指令或者使用`$validators`对象注册自定义函数。自定义验证器可以处理复杂的业务逻辑，例如检查用户名是否已存在、验证密码强度等。
总结来说，AngularJS的手动表单验证提供了强大的机制，使开发者能够轻松地实现数据验证，提高应用的用户体验。通过设置`novalidate`和`name`属性，结合`ng-model`、`required`等属性以及`$error`对象，我们可以构建出具有强大验证功能的表单。同时，自定义验证器进一步扩展了AngularJS的验证能力，满足更多场景下的需求。
