angular如何實(shí)現(xiàn)form驗(yàn)證-創(chuàng)新互聯(lián)
這篇文章主要為大家展示了“angular如何實(shí)現(xiàn)form驗(yàn)證”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“angular如何實(shí)現(xiàn)form驗(yàn)證”這篇文章吧。
先上效果頁(yè)面：
其中幾個(gè)知識(shí)點(diǎn)
1、angularJs提供了幾個(gè)新的type類(lèi)型：
type="password" type="email" type="number" type="url"
2、幾個(gè)參數(shù)含義
ng-required //是否必填，true/false
ng-minlength //最小長(zhǎng)度，數(shù)字
ng-maxlength //大長(zhǎng)度，數(shù)字
min //最小數(shù)字，數(shù)字，僅在type="number"下
max //最小數(shù)字，數(shù)字，僅在type="number"
3、幾個(gè)form控制變量，先來(lái)一段代碼
<form role="form" name="myform" > <div class="form-group" > <label class="col-sm-2">用戶(hù)名</label> <div class="col-sm-8"> <input type="text" name="username" class="form-control" placeholder="請(qǐng)輸入用戶(hù)名"></div> </div> </form>
formName.inputFieldName.$pristine //字段是否未更改,對(duì)應(yīng)上面的html代碼即為 myform.username.$pristine formName.inputFieldName.$dirty //字段是否更改,對(duì)應(yīng)上面的html代碼即為 myform.username.$dirty formName.inputFieldName.$valid //字段有效,對(duì)應(yīng)上面的html代碼即為 myform.username.$valid formName.inputFieldName.$invalid //字段無(wú)效,對(duì)應(yīng)上面的html代碼即為 myform.username.$invalid formName.inputFieldName.$error //字段錯(cuò)誤信息，使用頻率比較高,對(duì)應(yīng)上面的html代碼即為 myform.username.$error
4、下面直接上代碼，首先是html代碼，使用了bootstrap.css樣式，在結(jié)尾引入了angular
<!DOCTYPE html>
<html>
<head>
<title>form驗(yàn)證</title>
<link rel="stylesheet" type="text/css" href="style/bootstrap.css">
</head>
<body ng-app="formModule">
<div >
<form role="form" name="myform" class="form-horizontal container" ng-controller="formctrl">
<!-- 用戶(hù)名 -->
<div class="form-group" ng-class="{'has-error':myform.username.$dirty && myform.username.$invalid}">
<label class="col-sm-2">用戶(hù)名</label>
<div class="col-sm-8">
<input type="text" name="username" ng-minlength="5" ng-maxlength="10" ng-required="true" ng-model="data.username" class="form-control" placeholder="請(qǐng)輸入用戶(hù)名"></div>
<div class="col-sm-2 text-danger" ng-show="myform.username.$error.minlength">用戶(hù)名必須大于5位</div>
<div class="col-sm-2" ng-show="myform.username.$error.maxlength">用戶(hù)名必須小于于10位</div>
</div>
<!-- 密碼 -->
<div class="form-group" ng-class="{'has-error':myform.password.$dirty&&myform.password.$invalid}">
<label class="col-sm-2">密 碼</label>
<div class="col-sm-8">
<input type="password" name="password" ng-minlength="10" ng-required="true" ng-model="data.password" class="form-control" placeholder="請(qǐng)輸入密碼"></div>
<div class="col-sm-2 text-danger" ng-show="myform.password.$error.minlength">密碼必須大于10位</div>
</div>
<!-- 確認(rèn)密碼 -->
<div class="form-group" ng-class="{'has-error':myform.passwordconfirm.$dirty&&myform.passwordconfirm.$invalid}">
<label class="col-sm-2">確認(rèn)密碼</label>
<div class="col-sm-8">
<input type="password" name="passwordconfirm" ng-required="true" ng-model="data.passwordconfirm" class="form-control" placeholder="請(qǐng)輸入確認(rèn)密碼"></div>
<div class="col-sm-2 text-danger" ng-show="data.passwordconfirm!=data.password&&myform.password.$dirty&&myform.passwordconfirm.$dirty">兩次密碼不一致</div>
</div>
<!-- 郵箱 -->
<div class="form-group" ng-class="{'has-error':myform.email.$dirty&&myform.email.$invalid}">
<label class="col-sm-2">郵 箱</label>
<div class="col-sm-8">
<input type="email" name="email" ng-required="true" ng-model="data.email" class="form-control" placeholder="請(qǐng)輸入郵箱地址"></div>
<div class="col-sm-2 text-danger" ng-show="myform.email.$error.email">請(qǐng)輸入正確郵箱地址</div>
</div>
<!-- 博客 -->
<div class="form-group" ng-class="{'has-error':myform.age.$dirty&&myform.age.$invalid}">
<label class="col-sm-2">年 齡</label>
<div class="col-sm-8">
<input type="number" name="age" ng-required="true" min="10" max="99" ng-model="data.age" class="form-control" placeholder="請(qǐng)輸入您的年齡"></div>
<div class="col-sm-2 text-danger" ng-show="myform.age.$error.min&&myform.age$error.max">請(qǐng)輸入正確年齡</div>
</div>
<!-- 年齡 -->
<div class="form-group" ng-class="{'has-error':myform.blog.$dirty&&myform.blog.$invalid}">
<label class="col-sm-2">博 客</label>
<div class="col-sm-8">
<input type="url" name="blog" ng-required="true" ng-model="data.blog" class="form-control" placeholder="請(qǐng)輸入博客地址"></div>
<div class="col-sm-2 text-danger" ng-show="myform.blog.$error.url">請(qǐng)輸入正確博客地址</div>
</div>
<!-- 性別 -->
<div class="form-group">
<label class="col-sm-2">性 別</label>
<div class="col-sm-8">
<label class="radio-inline">
<input type="radio" value="1" ng-model="data.sex" name="sex"> 男</label>
<label class="radio-inline">
<input type="radio" value="2" ng-model="data.sex" name="sex"> 女</label>
</div>
</div>
<!-- 愛(ài)好 -->
<div class="form-group">
<label class="col-sm-2">愛(ài) 好</label>
<div class="col-sm-8">
<label ng-repeat="hoppy in hoppies" class="checkbox-inline">
<input type="checkbox" name="hoppy[]" ng-click="togglehoppy()" ng-model="hoppy.checked" >{{hoppy.name}}
</label>
</div>
<div class="col-sm-2">{{data.Ahoppy.join('、')}}</div>
</div>
<!-- 地址 -->
<div class="form-group">
<label class="col-sm-2">地 址</label>
<div class="col-sm-3">
<select class="form-control" ng-model="data.provinec" ng-options="x.id as x.name for x in cities | cityfilter:0"></select>
</div>
<div class="col-sm-3">
<select class="form-control" ng-show="data.provinec" ng-model="data.area" ng-options="x.id as x.name for x in cities | cityfilter:data.provinec"></select>
</div>
<div class="col-sm-3">
<select class="form-control" ng-show="data.area" ng-model="data.city" ng-options="x.id as x.name for x in cities | cityfilter:data.area"></select>
</div>
</div>
</form>
</div>
<script src="js/angular.js"></script>
<script src="js/app.js"></script>
</body>
</html>下面為js代碼（可能其中有些不妥之處，請(qǐng)指正，謝謝）
(function(window) {
'use strict';
var mymodule = angular.module('formModule', []);
// 城市刪選器
mymodule.filter('cityfilter',function(){
return function(data,parent){
var cityData=[];
angular.forEach(data, function(item, key){
if(item.parent==parent){
cityData.push(item);
}
});
return cityData;
}
});
mymodule.controller('formctrl', ['$scope', function($scope) {
// 設(shè)定初始狀態(tài)
$scope.data={
Ahoppy:[1,3]
}
// 愛(ài)好對(duì)象
$scope.hoppies = [
{id: 1,name: '玩游戲',checked: istrue(1)},
{id: 2,name: '吃飯',checked: false},
{id: 3,name: '睡覺(jué)',checked: false},
{id: 4,name: '玩游戲',checked: true}
];
// 城市
$scope.cities=[
{name:'河南',parent:0,id:1},
{name:'鄭州',parent:1,id:2},
{name:'鄭東新區(qū)',parent:2,id:3},
{name:'金水區(qū)',parent:2,id:4},
{name:'二七區(qū)',parent:2,id:5},
{name:'信陽(yáng)',parent:1,id:6},
{name:'商城',parent:6,id:7},
{name:'羅山',parent:6,id:8},
{name:'杭州',parent:0,id:9},
{name:'西湖區(qū)',parent:9,id:10},
{name:'余杭區(qū)',parent:9,id:11},
{name:'蕭山區(qū)',parent:9,id:12},
{name:'上城區(qū)',parent:9,id:13},
];
// 判斷是否是選中狀態(tài)
function istrue(id){
for(var i=0;i<$scope.data.Ahoppy.length;i++){
if($scope.data.Ahoppy[i]===id){
return true;
}
}
return false;
};
// 獲取選中的愛(ài)好
$scope.togglehoppy = function() {
$scope.data.Ahoppy = [];
angular.forEach($scope.hoppies, function(item, key) {
if (item.checked == true) {
$scope.data.Ahoppy.push(item.id);
}
});
}
}])
})(window)以上是“angular如何實(shí)現(xiàn)form驗(yàn)證”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站jinyejixie.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。
分享題目：angular如何實(shí)現(xiàn)form驗(yàn)證-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://jinyejixie.com/article40/dhopeo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站營(yíng)銷(xiāo)、品牌網(wǎng)站制作、商城網(wǎng)站、建站公司、Google
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 《c++primer》第三章字符串、vector、數(shù)組-創(chuàng)新互聯(lián)
- 檢測(cè)本地網(wǎng)絡(luò)到ECS實(shí)例之間網(wǎng)絡(luò)狀況的方法-創(chuàng)新互聯(lián)
- css描邊屬性有什么用-創(chuàng)新互聯(lián)
- python的學(xué)習(xí)路線(xiàn)-創(chuàng)新互聯(lián)
- Wrapper類(lèi)怎么在java中使用-創(chuàng)新互聯(lián)
- Kubernetes集群部署——二進(jìn)制包-創(chuàng)新互聯(lián)
- Springboot配置多個(gè)redis的方法示例-創(chuàng)新互聯(lián)
- 成都網(wǎng)站建設(shè)-企業(yè)網(wǎng)站有什么作用？企業(yè)建站優(yōu)點(diǎn)有哪些？ 2016-09-18
- 企業(yè)建站的主要步驟流程 2022-12-03
- 唐山企業(yè)建站：對(duì)于企業(yè)來(lái)說(shuō)做一個(gè)網(wǎng)站有多重要？ 2021-09-07
- 自助建站系統(tǒng) - 企業(yè)建站十萬(wàn)個(gè)為什么 2021-10-27
- 網(wǎng)站搭建初期 企業(yè)建站策劃該寫(xiě)什么內(nèi)容？ 2021-02-26
- 長(zhǎng)沙做網(wǎng)站細(xì)談企業(yè)建站與SEO之間趨勢(shì) 2022-09-13
- 企業(yè)建站需要注意哪些 2017-09-06
- 提高網(wǎng)站用戶(hù)體驗(yàn)度是每個(gè)企業(yè)建站時(shí)必須要考慮的問(wèn)題 2022-05-07
- 中小企業(yè)建站，別讓網(wǎng)站規(guī)劃拖了后腿 2016-11-03
- 信陽(yáng)制作企業(yè)網(wǎng)站：企業(yè)建站時(shí)這些細(xì)節(jié)必須要注意！ 2021-08-12
- 企業(yè)建站_你思考過(guò)這些問(wèn)題嗎 2023-01-09
- 良心推薦｜四個(gè)適合企業(yè)建站的網(wǎng)站建設(shè)軟件 2022-12-14