angular常用的表单验证指令

一、验证表单：

1.required 必填

<input type="text" required>

 

2.ng-minlength 最小长度

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

 

3.ng-maxlength 最大长度

<input type="text" ng-maxlength="5">

 

4.ng-pattern 匹配模式

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

 

5.电子邮件

<input type="email">

只要将input的type设为email即可

 

6.数字

<input type="number">

只要将input的type设为number即可

 

7.URL

<input type="url">

只要将input的type设为url即可

 

二、表单回应：

1.未修改过的表单

formName.inputFieldName.$pristine

 

2.修改过的表单

formName.inputFieldName.$dirty

 

3.经过验证的表单

formName.inputFieldName.$valid

 

4.未通过验证的表单

formName.inputFieldName.$invalid

 

5.错误

formName.inputFieldName.$error

$error对象，它包含当前表单的所有验证内容，以及它们是否合法的信息。

 

 

三、样式

.ng-pristine {}

.ng-dirty {}

.ng-valid {}

.ng-invalid {}

.ng-invalid-required {}

.ng-invalid-minlength {}

.ng-valid-maxlength {}