AngularJS實現表單驗證功能詳解
更新時間：2017年10月12日 11:58:39 作者：chengzhang_jian
這篇文章主要為大家詳細介紹了AngularJS實現表單驗證功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在ng中，針對表單和空間提供了屬性，用于驗證控件交互的狀態(tài)
布爾類型：
ng-valid 表單通過驗證時設置
ng-invalid 表單未通過驗證時設置
ng-pristine 表單沒有改動時設置
ng-dirty 表單有改動時設置
對象：
$error
注意事項：
①給表單以及表單組件 加上name屬性
②給需要用到的表單組件 ，加上ngModel
③屬性的用法
myForm.t_age.dirty/pristine/valid/invalid/$error
案例如下
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/angular.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<form name="myForm" ng-submit="submitInfo()">
<input type="text" name="t_name"
ng-model="userName" required/>
<span ng-show="myForm.t_name.$error.required">
姓名不能為空
</span>
<br/>
<input type="text" name="t_age"
ng-model="userAge" required/>
<span ng-show="myForm.t_age.$invalid">驗證失敗</span>
<span ng-show="myForm.t_age.$pristine">沒有輸入過</span>
<br/>
<input
ng-disabled="myForm.$invalid"
type="submit" value="提交"/>
</form>
</div>
<script>
var app = angular.module('myApp', ['ng']);
app.controller('myCtrl', function ($scope) {
$scope.submitInfo = function () {
console.log($scope.userName,$scope.userAge);
}
});
</script>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
詳解Angular5/Angular6項目如何添加熱更新(HMR)功能
這篇文章主要介紹了詳解Angular5/Angular6項目如何添加熱更新(HMR)功能，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了AngularJS 實現按需異步加載實例代碼的相關資料,需要的朋友可以參考下2015-10-10
本篇文章主要介紹了angular仿支付寶密碼框輸入效果，詳細的介紹了使用ng寫一個密碼框格子支付模塊，具有一定的參考價值，有興趣的可以了解一下。2017-03-03
這篇文章主要介紹了詳解angularjs跨頁面?zhèn)鲄⒂龅降囊恍﹩栴}，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了AngularJS入門教程之路由機制ngRoute,結合實例形式分析了AngularJS路由機制的原理、ngRoute的組成、配置、參數與相關使用技巧,需要的朋友可以參考下2016-12-12
Angularjs中$http以post請求通過消息體傳遞參數的實現方法
這篇文章主要介紹了Angularjs中$http以post請求通過消息體傳遞參數的方法,結合實例形式分析了$http使用post請求傳遞參數的相關設置與使用技巧,需要的朋友可以參考下2016-08-08
本篇文章主要介紹了angular 基于ng-messages的表單驗證實例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了AngularJS自定義指令之復制指令實現方法,結合完整實例形式分析了AngularJS自定義指令實現復制功能的相關操作技巧,需要的朋友可以參考下2017-05-05
這篇文章主要為大家詳細介紹了AngularJS Phonecat實例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
本文主要介紹AngularJs concepts，這里整理了詳細資料及簡單示例代碼來講解相關知識，有學習這部分知識的朋友可以參考下2016-09-09