AngularJs表单验证

能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的。在人与人沟通的语境中，表单验证给出来的反馈同获得正确输入同等重要。

表单验证不仅能给用户提供有用的反馈，同时也能保护我们的Web应用不会被恶意或者错误的输入所破坏。我们要在Web前端尽力保护后端。

AngularJs能够将HTML5表单验证功能同它自己的验证指令结合起来使用
AngularJs提供了很多表单验证指令，主要列举其中一些核心的验证功能以及如何创建自己的验证器。

<form name="form" novalidate>
	<label name="email">Your email</label>
	<input type="email" name="email" ng-model="email" placeholder="Email Address" />
</form>

借助AngularJs，不需要花费太多额外的精力就可以实现客户端表单的验证，虽然Web应用安全不能完全依赖客户端验证，但客户端验证可以提供表单的实时反馈。

要使用表单验证，保证每个form表单上都有name属性

所有输入字段都可以进行基本的验证，比如最大、最小长度等，这些功能由新的HTML5表单属性提供即可。

如果想要屏蔽浏览器对表单的默认验证行为，可以再表单上添加novalidate标记。

下面整理一些可以再input元素上使用的所有验证选项：

1、必填项

验证某个表单是否填写，只要在输入字段元素添加HTMML5标记required即可:

<input type="text" required />

2、最小长度

验证表单输入的文本长度是否大于某个最小值，在输入字段上使用AngularJs的ng-minlength="{ number }"：

<input type="text" ng-minlength="5" />

3、最大长度

验证表单输入的文本长度是否小于或者等于某个值，在输入字段上使用AngularJs的ng-maxlength='{ number }'：

<input type="text" ng-maxlength="20" />

4、模式匹配

使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式：

<input type="text" ng-pattern="[a-zA-Z]" />

5. 电子邮件

<input type="email" name="email" ng-model="user.email" />

6. 数字

<input type="number" name="age" ng-model="user.age" />

7. URL

<input type="url" name="homepage" ng-model="user.facebook_url" />