angularjs 表单校验指令_AngularJS中的表单验证机制

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

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

常见的有：

必填

长度限制

正则匹配

Email

数字

URL

自定义验证

AngularJS可以很容易的使用指令来添加自定义验证。

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

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

Angular为表单内置了4中CSS样式。ng-valid      通过验证的表单

ng-invalid    未通过验证的表单

ng-pristine   未修改过表单

ng-dirty      修改过表单

验证表单状态property$pristine   未修改过表单

$dirty      修改过表单

$valid      通过验证的表单

$invalid    未通过验证的表单

$error      验证失败

使用方法：

formName.inputFieldName.property

如

请填写正确的Email

表单验证实践

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

Email address

Submit

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

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

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

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

然后我们点击提交：