AngularJS是一款優秀的前端JS框架，已經被用于Google的多款產品當中。它有著諸多特性，最為核心的是：MVC、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等……使用它可以大大減少書寫代碼的工作量，但和Jquery不同，使用AngularJS有一定的難度，因此今天我將介紹以下怎樣使用AngularJS來對表單的提交內容進行驗證。
AngularJS對表單中常用的驗證操作
$dirty 表單有填寫記錄
$valid 字段內容合法的
$invalid 字段內容是非法的
$pristine 表單沒有填寫記錄
$error 表單驗證不通過的錯誤信息
1.相關插件的導入：AngularJS和Jquery一樣，是一種由程序員用js編寫好然后封裝起來的js插件，因此在使用之前要用以下代碼來導入它。
<script src="libs/angular.js"></script>
注：該js插件最好放在body之后，自己寫的js代碼則放在AngularJS之后防止產生錯誤。
2.在導入完AngularJS插件之后，我們首先要在body中創建一個form表單，用于接下來的操作，然后在表單上或者body上加上ng-app=""屬性來確定AngularJS的作用域，一般
推薦加在body上。
<body ng-app="app" ng-controller="ctrl"></body>
注：ng-controller="ctrl"用于設置控制器。
3.給form表單和input的name屬性命名，給form及input設置name后會將form表單信息默認綁定到$scope作用域中，故可以使用formName.inputName.$驗證操作 得到驗證結果。
<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自帶的表單驗證，防止多余影響。
例如：
myForm.text.$dirty="true";表單被填寫過myForm.text.$invalid"true";表單輸入不合法myForm.text.$error.required="true";表單必填但未填。
4.給input加上對應的驗證：
<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設置了最小長度4，最大長度10，必填的驗證信息，
對email則使用了email自帶驗證，增加了必填要求，
對password則是設置了正則驗證要求是6到18位的字母數字下劃線。
5.給提交按鈕加上ng-disabled="myForm.$dirty&&myForm.$invalid"屬性在表單輸入不合法時將按鈕禁用來阻止表單內容提交。
注：myForm.$dirty&&myForm.$invalid表示在表單有輸入的情況下輸入錯誤。
以上步驟完成之后表單的驗證就完成了，也可以加上span的ng-show="myForm.name.$invalid&&myForm.name.$dirty"屬性來設置在不同錯誤時出現不同的提示信息，這樣，一個可以驗證是否提交的表單就完成了。
以上所述是小編給大家介紹的使用AngularJS對表單提交內容進行驗證的操作方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
