客户端表单验证是AngularJS里面最酷的功能之一。 AngularJS表单验证可以让你从一开始就写出一个具有交互性和可响应的现代化HTML5表单。

angularJs实现了大多数的HTML5表单域（input，text,number,url,email,radio,checkbox），并添加了自己的一些验证指令（required，pattern ，minlength，maxlength，min，max）。

常见的有：

必填

<input type="text" ng-model="name" required />

 

长度限制

<input type="text" ng-model="password" ng-minlength="5" ng-maxlength="20" />

 

正则匹配

<input type="text" ng-model="text" ng-pattern="/^[a-zA-Z]/" />
Email
<input type='email' ng-model="email" required />
数字
<input type='number' ng-model="number" max='9' min='5' required />
URL
<input type="url" ng-model='url' required  >
自定义验证
AngularJS可以很容易的使用指令来添加自定义验证。

 

几点注意：

  • 模板里的form已经不是原生的HTML表单，而是Angular自己的指令了.参考：

  • 为了屏蔽html5中默认的验证效果，我们可以在form上引用novalidate属性。

  • Angular在对表单进行自动校验的时候会校验Model上的属性，如果不设置ng-model，校验机制就无法校验这个输入项

Angular为表单内置了4中CSS样式。

  1. ng-valid      通过验证的表单

  2. ng-invalid    未通过验证的表单

  3. ng-pristine   未修改过表单

  4. ng-dirty      修改过表单

验证表单状态property

  1. $pristine   未修改过表单

  2. $dirty      修改过表单

  3. $valid      通过验证的表单

  4. $invalid    未通过验证的表单

  5. $error      验证失败

使用方法：

formName.inputFieldName.property 
如<div class="alert alert-danger" ng-show="form.email.$dirty && form.email.$invalid">请填写正确的Email</div>

表单验证实践

让我们在AngularJs的模板上添加一个表单

<form role="form" name="form" novalidate>

<div class="form-group">
  <label for="exampleInputEmail1">Email address</label>
  <input type="email" name="email" class="form-control" ng-model="email" required/>
</div>
<button type="submit" class="btn btn-success" ng-disabled="!form.$valid" ng-click="doLogin()">Submit</button>
</form>

该表单用于验证Email地址是否正确，提交按钮添加了ng-disabled="!form.$valid" ，表示若未通过验证则禁用该按钮。如下：

2736218248622203942.png

右击查看源码可以看到angularJs自动为表单元素添加了一些class，并可根据用户的输入值自动改变该表单的class，我们可以给这些class加上样式来提醒用户是否通过验证。

864409653578463871.jpg

我们还为提交按钮绑定了一个点击事件，控制器里的代码如下：

135389463897914096.png

当我们输入正确的Email地址后该表单通过验证，提交按钮自动会从禁用状态变为可用状态。

然后我们点击提交：

1623547665767153264.png