使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法

更新時(shí)間：2017年07月12日 16:17:19 作者：吳建銳

AngularJS是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。下面通過本文給大家分享使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法，需要的的朋友參考下吧

AngularJS是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。它有著諸多特性，最為核心的是：MVC、模塊化、自動(dòng)化雙向數(shù)據(jù)綁定、語義化標(biāo)簽、依賴注入等……使用它可以大大減少書寫代碼的工作量，但和Jquery不同，使用AngularJS有一定的難度，因此今天我將介紹以下怎樣使用AngularJS來對(duì)表單的提交內(nèi)容進(jìn)行驗(yàn)證。

AngularJS對(duì)表單中常用的驗(yàn)證操作

$dirty 表單有填寫記錄
$valid 字段內(nèi)容合法的
$invalid 字段內(nèi)容是非法的
$pristine 表單沒有填寫記錄
$error 表單驗(yàn)證不通過的錯(cuò)誤信息

1.相關(guān)插件的導(dǎo)入：AngularJS和Jquery一樣，是一種由程序員用js編寫好然后封裝起來的js插件，因此在使用之前要用以下代碼來導(dǎo)入它。

 <script src="libs/angular.js"></script>

注：該js插件最好放在body之后，自己寫的js代碼則放在AngularJS之后防止產(chǎn)生錯(cuò)誤。

2.在導(dǎo)入完AngularJS插件之后，我們首先要在body中創(chuàng)建一個(gè)form表單，用于接下來的操作，然后在表單上或者body上加上ng-app=""屬性來確定AngularJS的作用域，一般

推薦加在body上。

 <body ng-app="app" ng-controller="ctrl"></body>

注：ng-controller="ctrl"用于設(shè)置控制器。

3.給form表單和input的name屬性命名，給form及input設(shè)置name后會(huì)將form表單信息默認(rèn)綁定到$scope作用域中，故可以使用formName.inputName.$驗(yàn)證操作得到驗(yàn)證結(jié)果。

<form class="form-horizontal" name="myForm" novalidate>
  <input type="text" name="name" >
  <input type="email" name="mail">
  <input type="password" name="pwd" >
</form>

novalidata用于禁止h5自帶的表單驗(yàn)證，防止多余影響。

例如：

myForm.text.$dirty="true";表單被填寫過
myForm.text.$invalid"true";表單輸入不合法
myForm.text.$error.required="true";表單必填但未填。

4.給input加上對(duì)應(yīng)的驗(yàn)證：

<input type="text" name="name" ng-minlength="4" ng-maxlength="10" required ng-class="{erro:myForm.name.$invalid&&myForm.name.$dirty}"/>
<input type="email" name="mail" required />
<input type="password" name="pwd" ng-model="user.pwd" pattern="^\w{6,18}$"/>

注：

以上代碼對(duì)text設(shè)置了最小長度4，最大長度10，必填的驗(yàn)證信息，

對(duì)email則使用了email自帶驗(yàn)證，增加了必填要求，

對(duì)password則是設(shè)置了正則驗(yàn)證要求是6到18位的字母數(shù)字下劃線。

5.給提交按鈕加上ng-disabled="myForm.$dirty&&myForm.$invalid"屬性在表單輸入不合法時(shí)將按鈕禁用來阻止表單內(nèi)容提交。

注：myForm.$dirty&&myForm.$invalid表示在表單有輸入的情況下輸入錯(cuò)誤。

以上步驟完成之后表單的驗(yàn)證就完成了，也可以加上span的ng-show="myForm.name.$invalid&&myForm.name.$dirty"屬性來設(shè)置在不同錯(cuò)誤時(shí)出現(xiàn)不同的提示信息，這樣，一個(gè)可以驗(yàn)證是否提交的表單就完成了。

以上所述是小編給大家介紹的使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: