AngularJS作為下一代的Web應(yīng)用開發(fā)的框架，表單驗(yàn)證的方式與JQuery/JS截然不同，總之，更加簡潔更加簡單。
基本結(jié)構(gòu)
HTML代碼
<form action="#">
<input id="txt_submit" type="text" name="test" placeholder="請輸入6~10個(gè)字符的中文"><span id="msg"></span>
<button id="btn_submit" type="submit">提交</button>
</form>
AngularJS基本結(jié)構(gòu)
<body ng-app>
<script src="js/angular.js"></script>
</body>
實(shí)現(xiàn)方式
-
form添加屬性name。最好同時(shí)加上novalidate屬性(用于禁用H5默認(rèn)自帶的驗(yàn)證)。
<form action="#" name="testForm" novalidate>
...
</form>
-
input添加ng-model，綁定的變量test，用于后面的驗(yàn)證。
<input name="test" ng-model="test" type="text" placeholder="請輸入6~10個(gè)字符的中文">
-
input添加驗(yàn)證屬性required和驗(yàn)證指令ng-minlength、ng-maxlength以及ng-pattern。同時(shí)，對應(yīng)添加相關(guān)的提示信息。
<input name="test" ng-model="test" type="text" placeholder="請輸入6~10個(gè)字符的中文" required ng-minlength="6" ng-maxlength="10" ng-pattern="/^[\u4e00-\u9fa5]+$/">
<div ng-show="testForm.test.$dirty && testForm.test.$invalid">
<div ng-if="testForm.test.$error.required">該輸入項(xiàng)不能為空</div>
<div ng-if="testForm.test.$error.minlength">輸入長度不能小于6</div>
<div ng-if="testForm.test.$error.maxlength">輸入長度不能大于10</div>
<div ng-if="testForm.test.$error.pattern">必須輸入漢字</div>
</div>
- 為了防止用戶未輸入就提交，在按鈕添加禁用指令，當(dāng)表單完全驗(yàn)證通過才能提交。
<button ng-disabled="testForm.$invalid" type="submit">提交</button>
代碼說明：
| 代碼 | 說明 |
|---|---|
testForm |
表單名 |
test |
輸入框綁定的變量 |
$dirty |
表單變量是否修改 |
$invalid |
表單變量驗(yàn)證是否未通過 |
$error.required |
表單變量是否沒填寫 |
$error.minlength |
表單變量是否少于最小長度 |
$error.maxlength |
表單變量是否超出最大長度 |
$error.pattern |
表單變量是否不滿足正則表達(dá)式 |
如有任何疑問，歡迎下面留言
