前端数据校验的意义在于改善用户体验，用户不用等到將数据提交到服务器后才知道哪些数据是不合法的。使用angular对表单元素进行校验是相当方便的，我们来看一下可以在input元素上使用的所有校验选项,可以验证必填项，长度和正则匹配等.

属性值验证

1. 必填项验证
   某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可：

   1	<input type="text" required />

2. 最小长度
   验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= “{number}”：

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

3. 最大长度
   验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令ng-maxlength=”{number}”：

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

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

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

PS：

• 使用input的type属性，可以对email，number，url进行验证
• form中添加novalidate属性,使表单自带的验证无效

表单验证

1. 未修改过的表单
   布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过：

   1	formName.inputFieldName.$pristine;

2. 修改的表单
   布尔型属性，当且仅当用户实际已经修改的表单。不管表单是否通过验证：

   1	formName.inputFieldName.$dirty

3. 经过验证的表单
   布尔型属性，它指示表单是否通过验证。如果表单当前通过验证，他将为true：

   1	formName.inputFieldName.$valid

4. 未通过验证的表单

   1	formName.inputFieldName.$invalid

PS：ng-disabled=”formName.inputFieldName.$invalid” 表单验证不通过时按钮失效

举个栗子:

在表单验证出错时，可以通过ng-show显示报错信息

1
2
3
4
5
6

<form name="userForm">
    <input type="text" name="username" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required>
    <p ng-show="userForm.username.$error.minlength">Username is too short.</p>
    <p ng-show="userForm.username.$error.maxlength">Username is too long.</p>
    <p ng-show="userForm.username.$error.required">Your username is required.</p>
</form>

也可以使用ng-message

1
2
3
4
5

<div ng-messages="userForm.name.$error">
    <p ng-message="minlength">Username is too short.</p>
    <p ng-message="maxlength">Username is too long.</p>
    <p ng-message="required">Your username is required.</p>
</div>