本例通過(guò)Angular框架來(lái)實(shí)現(xiàn)簡(jiǎn)單的表單驗(yàn)證
創(chuàng)新互聯(lián)公司專(zhuān)注于企業(yè)成都營(yíng)銷(xiāo)網(wǎng)站建設(shè)、網(wǎng)站重做改版、樂(lè)至網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5、商城網(wǎng)站制作、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性?xún)r(jià)比高，為樂(lè)至等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。
一、html結(jié)構(gòu)
1、借助于bootstrap快速的編寫(xiě)了一個(gè)簡(jiǎn)單的表單
代碼主要部分如下：
用戶表單提交
2、表單驗(yàn)證常見(jiàn)問(wèn)題及指令
1）、問(wèn)題：
》如何綁定數(shù)據(jù)——雙向綁定
》驗(yàn)證表單——正則表達(dá)式
》顯示錯(cuò)誤信息
》整個(gè)Form的驗(yàn)證
》避免提交沒(méi)通過(guò)驗(yàn)證的表單
》防止多次提交
2）、常用指令
》指令：
ng-model,ng-required,ng-pattern,ng-maxlength,ng-minlength,ng-change
》樣式：
ng-valid,ng-invalid,ng-pristine,ng-dirty
》form控制變量
formName.inputFieldName.$error:字段錯(cuò)誤信息
formName.inputFieldName.$dirty:字段是否修改
formName.inputFieldName.$pristine:字段是否是初始狀態(tài)
formName.inputFieldName.$valid:字段是否有效
formName.inputFieldName.$invalid:字段是否無(wú)效
二、功能實(shí)現(xiàn)
2.1 用戶名驗(yàn)證
用戶輸入用戶名字段驗(yàn)證主要是長(zhǎng)度驗(yàn)證，以及是否必須
1、ng-model綁定表單數(shù)據(jù)，以便使用angular的驗(yàn)證api
2、ng-minlength,ng-maxlength規(guī)定字段長(zhǎng)段，required規(guī)定字段必填
3、錯(cuò)誤提示信息通過(guò)formName.inputFieldName.$error.minlength/maxlength決定是否要顯示，當(dāng)輸入不合法時(shí)，$error對(duì)應(yīng)的錯(cuò)誤信息會(huì)為true
如下：
用戶名長(zhǎng)度不能小于5位用戶名長(zhǎng)度不能大于15位
2.2 密碼確認(rèn)驗(yàn)證
用戶密碼確認(rèn)驗(yàn)證需要保證兩次輸入的密碼一致，且在未輸入確認(rèn)密碼前不驗(yàn)證
1、綁定數(shù)據(jù)ng-model=data.pwdConfirm（所有表單數(shù)據(jù)都保存到data對(duì)象中）
2、通過(guò)判斷data.pwdConfirm!==data.password確定兩次密碼是否輸入一致
3、通過(guò)formName.inputField.$dirty確定此項(xiàng)是否填寫(xiě)過(guò)
兩次輸入的密碼不一致
2.3 郵箱驗(yàn)證
郵箱驗(yàn)證主要驗(yàn)證郵箱格式是否正確，字段長(zhǎng)度
1、使用H5中新增type屬性值email作為
2、通過(guò)ng-pattern指令定義郵箱驗(yàn)證的正則
3、郵箱驗(yàn)證常用正則表達(dá)式：^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+
4、通過(guò)myForm.email.$error.pattern驗(yàn)證郵箱格式是否正確
郵箱長(zhǎng)度不能小于5位請(qǐng)?zhí)顚?xiě)正確的郵箱格式郵箱長(zhǎng)度不能大于30位
2.4 單復(fù)選框
單復(fù)選框主要確定數(shù)據(jù)綁定問(wèn)題，以及復(fù)選框的數(shù)據(jù)渲染
1、通過(guò)以data對(duì)象的屬性形式來(lái)綁定數(shù)據(jù)
2、多選的選項(xiàng)值通過(guò)ng-repeat進(jìn)行遍歷
3、設(shè)置value值以便提交時(shí)對(duì)值進(jìn)行區(qū)分
2.5 城市二級(jí)聯(lián)動(dòng)
1、城市數(shù)據(jù)定義：每個(gè)城市對(duì)象包括id,parent,name屬性，id為每個(gè)城市省份獨(dú)有，parent是根據(jù)父級(jí)省份或城市而定
2、通過(guò)ng-options指令來(lái)遍歷出城市數(shù)據(jù)
2.5.1 城市數(shù)據(jù)模型
通過(guò)\$scope.cities定義數(shù)據(jù)模型
重慶分公司
重慶分公司
$scope.cities=[
{
id:1,
parent:0,
name:'四川省'
},
{
id:2,
parent:1,
name:'成都市'
},
...
]
2.5.2 html中渲染城市數(shù)據(jù)
通過(guò)ng-options指令和ng-model指令遍歷數(shù)據(jù)和設(shè)置默認(rèn)值
說(shuō)明：
1、ng-options=”obj.name for obj in datas” 常見(jiàn)用法，通過(guò) obj.id as obj.name設(shè)置option標(biāo)簽的value值為id，內(nèi)容為name
2、ng-model可用于設(shè)置select的默認(rèn)值
2.5.3 定義過(guò)濾器用于過(guò)濾省份，城市等
.filter("cityFilter",function(){
return function(input,parent){
var filtedData=[];
angular.forEach(input,function(value,key){
if(value.parent===parent){
filtedData.push(value)
}
})
return filtedData;
}
})
說(shuō)明：
1、如上通過(guò)定義cityFilter，傳入一個(gè)parent作為參數(shù)，遍歷傳入的數(shù)據(jù)，并寬判斷是否與傳入的parent相等來(lái)確定當(dāng)前城市是哪一級(jí)
2、返回的filtedData即是過(guò)濾結(jié)果。
3、用到了angular.forEach(obj,fn)迭代器，其中fn有三個(gè)參數(shù)傳入，分別是value,key,obj；value即為當(dāng)前遍歷出的對(duì)象，key為遍歷的唯一標(biāo)識(shí)，obj為被遍歷的數(shù)組或?qū)ο蟊旧怼?
使用（省份）： ng-options="c.id as c.name for c in cities|cityFilter:0"
2）、城市對(duì)應(yīng)選擇
1、根據(jù)data.province作為過(guò)濾參數(shù)，進(jìn)行城市篩選
2、區(qū)域的選擇同理，可設(shè)置當(dāng)選擇了城市后，再出現(xiàn)區(qū)域選項(xiàng)框（ng-show指令）
2.6 表單提交
1、功能需求：當(dāng)表單驗(yàn)證不通過(guò)時(shí)，使提交按鈕失效（ng-disabled）,
html結(jié)構(gòu)：
js:
$scope.reset=function(){
$scope.myForm.$setPristine();
}
注：表單中有一個(gè)$setPristine()方法將表單復(fù)位原始狀態(tài)，class,$dirty,$pristine會(huì)恢復(fù)原始狀態(tài)。但注意表單的錯(cuò)誤信息$error并不會(huì)被隱藏，所以在驗(yàn)證表單時(shí)，記得在每一項(xiàng)錯(cuò)誤信息都是由$dirty才判斷的。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
