溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時間：2020-09-22 13:53:09 來源：腳本之家 閱讀：214 作者：吳建銳 欄目：web開發(fā)

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

AngularJS對表單中常用的驗證操作

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

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

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

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

2.在導(dǎo)入完AngularJS插件之后，我們首先要在body中創(chuàng)建一個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后會將form表單信息默認(rèn)綁定到$scope作用域中，故可以使用formName.inputName.$驗證操作 得到驗證結(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用于禁止h6自帶的表單驗證，防止多余影響。

例如：

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

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

<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}$"/>

注：

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

對email則使用了email自帶驗證，增加了必填要求，

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

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

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

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

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手