AngularJS系列：表單全解（表單驗證，radio必選，三級聯動，check綁定，form提交驗證）
1、查看$scope -->尋找Form控制變量的位置
Form控制變量 格式：form的name屬性.input的name屬性.$...
- formName.inputField.$pristine 字段是否
未更改 - formName.inputField.$dirty 字段是否
更改 - formName.inputField.$valid 字段
有效 - formName.inputField.$invalid 字段
無效 - formName.inputField.$error 字段
錯誤信息
問題
爲何要按照上面的格式寫才能找到對應的變量從而正確表達字段的一些驗證信息呢？咱們經過下面程序調試。javascript
調試過程
html
<div ng-app="AppKe" >
<div ng-controller="OuterController">
<form novalidate name="formKe" >
<input type="text" name="userName" value="" ng-model="user.name" />
</form>
</div>
</div>
javasript
angular.module('AppKe', [])
.controller('OuterController', function($scope){
$scope.user = {
name: '李可'
}
console.log($scope);
})
結果 Gif 時間：30s
結論
從上圖中，咱們清楚地瞭解到：這幾個控制變量在哪裏了吧。這個確實有點考驗我了~剛開始研究。css
解釋
form具備這些變量，form內的元素也繼承這些。（我的理解）。$scope當前控制器的最高的做用域。html
2、表單中特定的input屬性
form：有個name屬性 novalidate 去除h5自帶的驗證 name 名字 ng-model 綁定的數據 ng-required 是否必填 注意和required區別 ng-minlength ng-maxlength 最小、最大長度 ng-pattern 匹配模式 email url number ng-change 值變化的回調
3、表單中特定的CSS 類選擇器，下文中沒用，用了bootstrap樣式
ng-valid //有效時的類樣式名字. ng-invalid //無效時的類樣式名字. ng-pristine //未更改的類樣式名字. ng-dirty //更改的類樣式名字. ng-submitted //提交後的類樣式名字.
這個能夠在官網查到：https://code.angularjs.org/1.3.0/docs/api/ng/directive/form
4、進入完成的一個表單
資源
- css地址
http://v3.bootcss.com/css/#forms
form提交驗證。只會驗證表單元素的required屬性。其他不驗證。
required和ngrequired相反。required頁面加載的時候就自動驗證=true。java
html
<div ng-app="AppKe" style="margin-top:50px;">
<div ng-controller="OuterController">
<form novalidate name="formKe" class="form-horizontal container">
<div class="form-group" ng-class="{'has-error':formKe.userName.$invalid}">
<label for="userIDTxt" class="control-label col-sm-2 ">用戶名</label>
<div class="col-sm-10">
<input type="text" name="userName" class="form-control" id="userIDTxt" placeholder="用戶名" ng-minlength="2" ng-maxlength="10" ng-required="true" ng-model="user.name"/>
<div class="alert alert-danger help-block" ng-show="formKe.userName.$error.minlength">用戶名最小長度2</div>
<div class="alert alert-danger help-block" ng-show="formKe.userName.$error.maxlength" >用戶名最大長度10</div>
{{formKe.userName.$error}}
</div>
</div>
</form>
</div>
</div>
javascript
angular.module('AppKe', [])
.controller('OuterController', function($scope){
})
結果
分析
頁面剛加載好，不該該haserror類樣式名：angularjs
- 對應的
ng-class="{'has-error':formKe.userName.$invalid}"表示：冒號後面的表達式爲真的時候，元素才具備has-error類樣式- 寫法注意：注意寫成
json對象的格式，類樣式名要單引號 - 應該是表單元素有驗證沒經過，而且該元素更改過纔會觸發。
ng-class="{'has-error':myForm.username.$dirty && myForm.username.$invalid}"
- 寫法注意：注意寫成
- 有最大最小值，不用
ng-required="true"
完整表單
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="ddd/angular.js"></script>
<script type="text/javascript" src="formKe.js"></script>
<link rel="stylesheet" type="text/css" href="framework/bootstrap/css/bootstrap.css"></link>
</head>
<body>
<div ng-app="AppKe" style="margin-top:50px;">
<div ng-controller="OuterController">
<!--這些提示的信息首次加載的時候，minlength- maxlength - email都爲false-->
<form name="formKe" novalidate class="form-horizontal container">
<div class="form-group" ng-class="{'has-error':formKe.userName.$dirty && formKe.userName.$invalid}">
<label for="userIDTxt" class="control-label col-sm-2 ">*用戶名</label>
<div class="col-sm-10">
<input type="text" name="userName" class="form-control" id="userIDTxt" placeholder="用戶名" ng-minlength="2" ng-maxlength="10" ng-model="user.name" required/>
<div class="alert alert-danger help-block" ng-show="formKe.userName.$dirty&&formKe.userName.$error.required">必填項</div>
<div class="alert alert-danger help-block" ng-show="formKe.userName.$dirty&&formKe.userName.$error.minlength">用戶名最小長度2</div>
<div class="alert alert-danger help-block" ng-show="formKe.userName.$dirty&&formKe.userName.$error.maxlength" >用戶名最大長度10</div>
錯誤$error：{{formKe.userName.$error}}++改動過$dirty：{{formKe.userName.$dirty}} ++驗證沒經過$invalid：{{formKe.userName.$invalid}}
</div>
</div>
<div class="form-group" ng-class="{'has-error':formKe.userPwd.$dirty && formKe.userPwd.$error.minlength}">
<!--formKe.userName.$invalid代替formKe.userPwd.$error.minlength-->
<label for="userPwd" class="control-label col-sm-2 ">*密碼</label>
<div class="col-sm-10">
<input type="password" name="userPwd" class="form-control" id="userPwd" placeholder="密碼" ng-minlength="6" ng-model="user.userPwd" required/>
<div class="alert alert-danger help-block" ng-show="formKe.userPwd.$dirty&&formKe.userPwd.$error.minlength">必填項，最小長度6</div>
錯誤$error：{{formKe.userPwd.$error}}++改動過$dirty：{{formKe.userPwd.$dirty}} ++驗證沒經過$invalid：{{formKe.userPwd.$invalid}}
</div>
</div>
<div class="form-group" ng-class="{'has-error':formKe.userPwd.$dirty&&formKe.pwdConfirm.$dirty&&user.userPwd!=user.pwdConfirm}">
<label for="pwdConfirm" class="control-label col-sm-2 ">*確認密碼</label>
<div class="col-sm-10">
<input type="password" name="pwdConfirm" class="form-control" id="pwdConfirm" placeholder="確認密碼" ng-model="user.pwdConfirm" required/>
<div class="alert alert-danger help-block" ng-show="formKe.pwdConfirm.$dirty&&formKe.pwdConfirm.$dirty&&user.userPwd!=user.pwdConfirm">密碼與確認密碼不一致</div>
錯誤$error：{{formKe.pwdConfirm.$error}}++改動過$dirty：{{formKe.pwdConfirm.$dirty}} ++驗證沒經過$invalid：{{formKe.pwdConfirm.$invalid}}
</div>
</div>
<div class="form-group" ng-class="{'has-error':formKe.userEmail.$dirty&&formKe.userEmail.$invalid}">
<label for="userEmail" class="control-label col-sm-2 ">郵箱</label>
<div class="col-sm-10">
<input type="email" name="userEmail" class="form-control" id="userEmail" placeholder="郵箱" ng-model="user.userEmail" ng-minlength="7" ng-maxlength="35"/>
<div class="alert alert-danger help-block" ng-show="formKe.userEmail.$dirty&&formKe.userEmail.$error.minlength">長度不得少於7位</div>
<div class="alert alert-danger help-block" ng-show="formKe.userEmail.$dirty&&formKe.userEmail.$error.maxlength">長度不得超過35位</div>
<div class="alert alert-danger help-block" ng-show="formKe.userEmail.$dirty&&formKe.userEmail.$error.email">格式不正確</div>
<!--type='email',也會在formKe.userEmail.$error生成$error.email-->
<!--formKe.userEmail.$error.pattern此處代替，但對應ng-pattern指令必定加上 ng-pattern="/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/"/，這樣依然生成$error.email，但一直未false，不形成影響-->
錯誤$error：{{formKe.userEmail.$error}}++改動過$dirty：{{formKe.userEmail.$dirty}} ++驗證沒經過$invalid：{{formKe.userEmail.$invalid}}++非郵箱：{{formKe.userEmail.$error.email}}
</div>
</div>
<div class="form-group" ng-class="{'has-error':formKe.userSite.$dirty&&formKe.userSite.$invalid}">
<label for="userSite" class="control-label col-sm-2 ">*我的網址</label>
<div class="col-sm-10">
<input type="url" name="userSite" class="form-control" id="userSite" placeholder="我的網址" ng-model="user.userSite" required/>
<div class="alert alert-danger help-block" ng-show="formKe.userSite.$dirty&&formKe.userSite.$error.url">格式不正確</div>
<!--required',也會在formKe.userEmail.$error生成$error.required，頁面首次加載，就爲true，因此加上formKe.userSite.$dirty-->
<!--type='url',也會在formKe.userEmail.$error生成$error.url-->
錯誤$error：{{formKe.userSite.$error}}++改動過$dirty：{{formKe.userSite.$dirty}} ++驗證沒經過$invalid：{{formKe.userSite.$invalid}}++非網址{{formKe.userSite.$error.url}}++沒填寫{{formKe.userSite.$error.required}}
</div>
</div>
<div class="form-group" ng-class="{'has-error':formKe.userSite2.$dirty&&formKe.userSite2.$invalid}">
<label for="userSite2" class="control-label col-sm-2 ">我的網址2</label>
<div class="col-sm-10">
<input type="url" name="userSite2" class="form-control" id="userSite2" placeholder="我的網址2" ng-model="user.userSite2" ng-required/>
<div class="alert alert-danger help-block" ng-show="formKe.userSite2.$dirty&&formKe.userSite2.$error.url">格式不正確</div>
<!--ng-required',也會在formKe.userEmail.$error生成$error.required，頁面首次加載，就爲false，因此不須要加上formKe.userSite2.$dirty-->
<!--type='url',也會在formKe.userEmail.$error生成$error.url-->
錯誤$error：{{formKe.userSite2.$error}}++改動過$dirty：{{formKe.userSite2.$dirty}} ++驗證沒經過$invalid：{{formKe.userSite2.$invalid}}++非網址{{formKe.userSite2.$error.url}}++沒填寫{{formKe.userSite2.$error.required}}（注意和上ng-required和required區別）
</div>
</div>
<div class="form-group" ng-class="{'has-error':formKe.num.$dirty&&formKe.num.$invalid}">
<label for="num" class="control-label col-sm-2 ">數字包含e能夠浮點</label>
<div class="col-sm-10">
<input type="number" name="num" class="form-control" id="num" placeholder="數字包含e" ng-model="user.num" ng-required /><!--min="1" max="99" 由於能夠輸入e，最大值99便不會驗證-->
<div class="alert alert-danger help-block" ng-show="formKe.num.$dirty&&formKe.num.$error.number">必須數字</div>
<!--<div class="alert alert-danger help-block" ng-show="formKe.num.$error.min">不得小於0</div>
<div class="alert alert-danger help-block" ng-show="formKe.num.$error.max">不得超過99</div>
min和max,也會在$error.min和生成$error.max-->
錯誤$error：{{formKe.num.$error}}++改動過$dirty：{{formKe.num.$dirty}} ++驗證沒經過$invalid：{{formKe.num.$invalid}}+沒填寫{{formKe.num.$error.required}}
</div>
</div>
<div class="form-group" ng-class="{'has-error':formKe.userAge.$dirty&&formKe.userAge.$invalid}">
<label for="userAge" class="control-label col-sm-2 ">年齡</label>
<div class="col-sm-10">
<input type="text" name="userAge" class="form-control" id="userAge" placeholder="年齡" ng-model="user.userAge" ng-required ng-pattern="/^\d{1,2}$/"/>
<div class="alert alert-danger help-block" ng-show="formKe.userAge.$dirty&&formKe.userAge.$error.pattern">必須1-99的數字</div>
<!--min和max,也會在$error.min和生成$error.max-->
錯誤$error：{{formKe.userAge.$error}}++改動過$dirty：{{formKe.userAge.$dirty}} ++驗證沒經過$invalid：{{formKe.userAge.$invalid}}+沒填寫{{formKe.userAge.$error.required}}++非數字{{formKe.userAge.$error.number}}++非1-99數字{{formKe.userAge.$error.pattern}}
</div>
</div>
<div class="form-group" >
<label for="userSex" class="control-label col-sm-2 ">(無驗證)性別</label>
<div class="col-sm-10">
<label class="radio-inline">
<!-- 賦值-->
<input type="radio" name="inlineRadioOptions" ng-model="user.sex" value="" checked>男</label>
<label class="radio-inline">
<input type="radio"name="inlineRadioOptions" ng-model="user.sex" value="">女</label>
</div>
</div>
<div class="form-group" >
<label for="userSex" class="control-label col-sm-2 ">*喜歡1</label>
<div class="col-sm-10">
<label class="checkbox-inline">
<input type="checkbox" ng-model="user.likes.eat" >吃</label>
<label class="checkbox-inline">
<input type="checkbox" ng-model="user.likes.drink">喝</label>
<label class="checkbox-inline">
<input type="checkbox" ng-model="user.likes.hitbean" >打豆豆</label>
</div>
</div>
<div class="form-group" >
<!-- 用指令生成-->
<label class="control-label col-sm-2 ">指令生成複選框雙向綁定喜歡2</label>
<div class="col-sm-10">
<label class="checkbox-inline" ng-repeat="item in hobbies">
<input type="checkbox" value="" ng-checked="user.hobbyIds.indexOf(item.id)!=-1" ng-click="toggleThis(item.id)">{{item.hobby}}》索引：{{user.hobbyIds.indexOf(item.id)}}</label>
</div>
</div>
<div class="form-group" >
<!-- 用指令生成-->
<label class="control-label col-sm-2 ">三級聯動</label>
<div class="col-sm-3">
<!--1，寫在select標籤上,無須option標籤-->
<!--2，ng-options和ng-repeator同樣循環。由於option有value (item.id)和(as)用戶看到的值(item.name ) for.-->
<!--3，要起一個ng-model指令，即便model層沒用到-->
<!--6，省改變時候，第三級別區縣隱藏:
省ng-change="county = false" ，縣ng-hide="!county"：本質改變ng-model的值，實時雙向綁定 -->
<select class="form-control" ng-change="county = false" ng-options= "item.id as item.name for item in address|cityfilter:0" ng-model="province"></select>
</div>
<div class="col-sm-3" >
<!--4，過濾參數是省的ng-model，表明Id ==>
item.id-->
<select class="form-control" ng-show="province" ng-options= "item.id as item.name for item in address|cityfilter:province" ng-model="district"></select>
<!--5，ng-show的設定 下面當province和district有值才顯示，值&&值以後變成bool？-->
</div>
<div class="col-sm-3">
<select class="form-control" ng-show="province&&district" ng-hide="!county" ng-options= "item.id as item.name for item in address|cityfilter:district" ng-model="county"></select>
</div>
<!--7，問題：展現一我的的固定的省市縣，後臺知道查詢出了縣id，倒過來==>市==>省。：直接在控制器內寫方法--></div>
<div class="form-group" >
<div class="col-sm-2" ></div>
<div class="col-sm-10" >
<button type="submit" class="btn btn-primary" ng-disabled="formKe.$invalid||!user.likes||!(user.likes.eat||user.likes.drink||user.likes.hitbean)">Regieter</button>
沒經過：{{formKe.$invalid}}
錯誤：{{formKe.$error}}
愛好：{{user.likes===undefined?'無愛好':user.likes}}
<button type="reset" class="btn btn-primary" ng-click="resetForm(formKe)">Reset</button>
</div></div>
</form>
</div>
</div>
</body>
</html>
js
angular.module('AppKe', [])
.filter("cityfilter", function() {
//前臺用法。會傳入一個
return function(data, parent) { //這兩個參數1，所有數據3分所有數據？ 2，parent傳的參數
//console.log(data, parent);
var finalArray = [];
angular.forEach(data, function(obj) {
//console.log(obj);//3份重複的數據
if (obj.parent == parent) {
finalArray.push(obj);
}
})
return finalArray;
}
})
.controller('OuterController', function($scope) {
/***************************************************1複選框**************************************************/
//1從數據庫查詢的全部選項，在前臺所有列出
$scope.hobbies = [{
id: 1,
hobby: "吃豆子"
}, {
id: 2,
hobby: "喝豆汁"
}, {
id: 3,
hobby: "豆豆玩"
}, {
id: 4,
hobby: "打豆豆"
}, {
id: 5,
hobby: "打一天豆豆"
}];
/*2從當前用戶的選項id數組，在前臺顯示出用戶的選中
$scope.user.hobbyIds=[3,5] 不行*/
$scope.user = {
hobbyIds: [3, 5, 2]
}
/*3,用戶點擊的時候:可能選中，可能沒選中
當view中沒選中，點擊選中時，model層($scope.user)要添加對應的喜愛選項Id
當view中選中，點擊取消時，model層($scope.user)要刪除對應的喜愛選項Id ，不要受到上面$scope.user的影響，刪除了就少了。*/
$scope.toggleThis = function(id) {
//假如這個用戶沒有喜愛
var index = -1;
if (!$scope.user.hobbyIds) {
$scope.user.hobbyIds = [];
} else {
index = $scope.user.hobbyIds.indexOf(id);
}
console.log(index);
//若是有這個選項，表示已經選中了，下面作刪除的操做
if (index != -1) {
$scope.user.hobbyIds.splice(index, 1); //頁面雙向綁定，頁面會變化
} else {
$scope.user.hobbyIds.push(id); //頁面雙向綁定，頁面會變化
}
}
/*************************************************2三級聯動****************************************************/
//1,後臺獲取數據庫數據，自動綁定到前臺
$scope.address = [{
name: '上海',
parent: 0,
id: 1
}, {
name: '上海市',
parent: 1,
id: 2
}, {
name: '上海一區',
parent: 2,
id: 8
}, {
name: '上海二區',
parent: 2,
id: 3
}, {
name: '北京',
parent: 0,
id: 4
}, {
name: '北京市',
parent: 4,
id: 5
}, {
name: '北京一區',
parent: 5,
id: 6
}, {
name: '北京二區',
parent: 5,
id: 7
}, {
name: '山東',
parent: 0,
id: 9
}, {
name: '青島市',
parent: 9,
id: 100
}, {
name: '菏澤市',
parent: 9,
id: 11
}, {
name: '青島一區',
parent: 100,
id: 12
}, {
name: '菏澤一區',
parent: 11,
id: 13
}];
//2給省、市、縣、區寫過濾器
//省：把parentid不是0的過濾掉
//filter：對對象的某個字段過濾掉 不是精準過濾（只能找parentid=0或者某個值的），此次過濾的是parentid不是0的的
//這個時候，只能自定義過濾器 在上面cityfilter
//3省市區的選中
$scope.county=3;
//從後臺查這我的在的區縣id是2---pid--》市id--pid--》省id
//寫一個普通方法，用this this的指向？ 有
this.searchParent = function(Id) {
var pId;
angular.forEach($scope.address, function(item) {
if ( item.id== Id) {
pId = item.parent;
console.log(pId);
return; //終止循環,跳出全部循環
}
})
return pId;
}
if ($scope.county != undefined) {
console.log($scope.county);
$scope.district = this.searchParent($scope.county);
console.log($scope.district);
$scope.province = this.searchParent($scope.district);
}
/***************************************************重置**************************************************************/
/*type=reset會將用戶輸入的清空，默認form的一些屬性，radio會默認選第一個。爲第一個select會選第一個值
可是不能將綁定數據表單元素從新綁定上去 好比綁定的checkbox，select不能綁定*/
$scope.resetForm=function (formKe) {
console.log(formKe)
/*$setPristine 會將class,$dirty,$pristine恢復，但不是單$.error恢復*/
formKe.$setPristine();//因此在ng-show面加上....$dirty 重置到原來狀態的時候..$dirty就變成了false。
/*對checkbox處理*/
$scope.user = {
hobbyIds: [3, 5, 2]
}
}
})
截圖
草稿
1表單
input屬性
name 名字
ng-model 綁定的數據
ng-required 是否必填
ng-minlength ng-maxlength 最小、最大長度
ng-pattern 匹配模式
ng-change 值變化的回調
css樣式
表單驗證 很是全面
http://www.miaoyueyue.com/archives/607.html
博客園
http://www.cnblogs.com/rohelm/p/4033513.html
ng-show="expression"
ng-required
--注入的3中形式
構造者 --angular
geterseter
反射
function controller($scope){} 注入$window service等
undefined||true
true
undefined||false
false
undefined&&false
undefined
undefined&&true
undefined
!undefined
true
相關文章
- 1. AngularJS 表單（ng-form）驗證
- 2. angularJS form表單驗證
- 3. AngularJS form validation-表單驗證
- 4. angularJS表單驗證ng-form
- 5. jquery---提交表單 radio 驗證
- 6. angularjs 簡單的form表單驗證
- 7. Django之form表單提交併驗證
- 8. Html form 表單提交前驗證
- 9. form 表單提交前驗證
- 10. form 表單提交前驗證 onsubmit
- 更多相關文章...
- • PHP 表單驗證 - PHP教程
- • PHP 表單 - 驗證郵件和URL - PHP教程
- • SpringBoot中properties文件不能自動提示解決方法
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 升級Gradle後報錯Gradle‘s dependency cache may be corrupt (this sometimes occurs
- 2. Smarter, Not Harder
- 3. mac-2019-react-native 本地環境搭建(xcode-11.1和android studio3.5.2中Genymotion2.12.1 和VirtualBox-5.2.34 )
- 4. 查看文件中關鍵字前後幾行的內容
- 5. XXE萌新進階全攻略
- 6. Installation failed due to: ‘Connection refused: connect‘安卓studio端口占用
- 7. zabbix5.0通過agent監控winserve12
- 8. IT行業UI前景、潛力如何？
- 9. Mac Swig 3.0.12 安裝
- 10. Windows上FreeRDP-WebConnect是一個開源HTML5代理，它提供對使用RDP的任何Windows服務器和工作站的Web訪問
歡迎關注本站公眾號,獲取更多信息
