AngularJS 输入验证

AngularJS 输入验证

常用指令

1. 必填项验证

验证某个输入项是否已填写，只要在输入字段元素上添加required 标记（HTML5）

<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必输</span>
</span>

2. 最大/小长度

使用指令：<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13.9200000762939px; line-height: 20.8800010681152px;">ng-maxleng= "{number}"/<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13.9200000762939px; line-height: 20.8800010681152px;">ng-minleng= "{number}"</span></span><pre name="code" class="html"><input type="text" ng-model="userName" name="name" ng-minlength="5"  ng-maxlength="20"/> 

3. 模式匹配

<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13.9200000762939px; line-height: 20.8800010681152px;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13.9200000762939px; line-height: 20.8800010681152px;">使用指令ng-pattern="/reg/"</span></span>

<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13.9200000762939px; line-height: 20.8800010681152px;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13.9200000762939px; line-height: 20.8800010681152px;"></span></span><pre name="code" class="html"><input type="text" ng-pattern="/[a-zA-Z]/" /> 

4. 邮件/数字/URL

<span style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 20.8800010681152px;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 20.8800010681152px;"><span style="font-size: 13.9200000762939px;">验证输入内容是否是电子邮件/数字/URL，只需将input的类型设置为“email”,"number","URL"
</span></span></span><pre name="code" class="html" style="font-size: 13.9200000762939px;"><input type="email" name="email" ng-model="user.email" /> 

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

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

屏蔽浏览器对表单的默认验证行为

<span style="font-size:10px;">在表单元素上添加novalidate标记即可（可以使用formName.inputFieldName.property）.</span>

<pre name="code" class="html"><span style="font-size:10px;"> A：formName.inputFieldName.$pristine：表示用户是否修改了表单，true：表示没有修改过</span>

<span style="font-size:10px;"> B：formName.inputFieldName.$dirty：当且仅当用户实际已经修改的表单，不管表单是否验证通过</span>

<span style="font-size:10px;"> C：formName.inputFieldNamae.$valid：表单是否通过验证，true:通过</span>

<span style="font-size:10px;"> D：formName.inputFieldName.$invalid</span>

<span style="font-size:10px;">
</span>

<span style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 20.8800010681152px;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 20.8800010681152px;"><span style="font-size: 13.9200000762939px;"><span style="font-family: 'Microsoft Yahei'; font-size: 15px; line-height: 22.5px; background-color: rgb(255, 255, 163);">最后两个属性在用于DOM元素的显示或隐藏时是特别有用</span>
</span></span></span>

<span style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 20.8800010681152px;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 20.8800010681152px;"><span style="font-size: 13.9200000762939px;"><span style="font-family: 'Microsoft Yahei'; font-size: 15px; line-height: 22.5px; background-color: rgb(255, 255, 163);">
</span></span></span></span>

<span style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 20.8800010681152px;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 20.8800010681152px;"><span style="font-size: 13.9200000762939px;"><span style="font-family: 'Microsoft Yahei'; font-size: 15px; line-height: 22.5px; background-color: rgb(255, 255, 163);">
</span></span></span></span>

<span style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 20.8800010681152px;"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 20.8800010681152px;"><span style="font-family: 'Microsoft Yahei'; line-height: 22.5px; background-color: rgb(255, 255, 255);"><span style="font-size:18px;">错误信息</span></span></span></span>

<span style="font-family:Microsoft Yahei;font-size:10px;"><span style="line-height: 22.5px; background-color: rgb(255, 255, 255);">$error：$error对象中保存着没有验证的验证器名称及对应的错误信息</span></span>

<span style="font-family:Microsoft Yahei;font-size:10px;"><span style="line-height: 22.5px; background-color: rgb(255, 255, 255);">$dirty：可以知道用户是否和控件进行过交互</span></span>

<span style="font-family:Microsoft Yahei;font-size:10px;"><span style="line-height: 22.5px; background-color: rgb(255, 255, 255);">$valid：</span></span><span style="line-height: 22.5px; font-family: 'Microsoft Yahei'; font-size: 10px; background-color: rgb(255, 255, 255);">当前控件中是否有错误信息，当有错误时值为false</span>

<span style="font-family:Microsoft Yahei;font-size:10px;"><span style="line-height: 22.5px; background-color: rgb(255, 255, 255);">$invalid：可以知道当前空间中是否存在至少一个错误，它的值和$valid相反</span></span>

<span style="font-family:Microsoft Yahei;font-size:10px;"><span style="line-height: 22.5px; background-color: rgb(255, 255, 255);"></span></span><pre name="code" class="html"><form ng-app="myApp" ng-controller="validateCtrl" 
name="myForm" novalidate>

<p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>

<p>邮箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</p>

<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  
myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>