標籤：長度 str maxlength style nova 情況 不同的 mod 影響
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對錶單提交內容進行驗證
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
