angular實現(xiàn)表單驗證及提交功能
本例通過Angular框架來實現(xiàn)簡單的表單驗證
一、html結(jié)構(gòu)
1、借助于bootstrap快速的編寫了一個簡單的表單
代碼主要部分如下：
<div class="container" style="margin-top: 30px;" ng-controller="myCtrl">
<h1 style="text-align: center">用戶表單提交</h1>
<form action="upload.js" class="form-horizontal" name="myForm">
<div class="form-group">
<label for="username" class="col-sm-3 control-label">用戶名</label>
<div class="col-sm-9">
<input type="text" autocomplete="false" name="username" placeholder="用戶名" ng-model="data.username" id="username" class="form-control" required>
<div class="alert alert-danger help-block" >
用戶名長度不能小于5位
</div>
<div class="alert alert-danger help-block" >
用戶名長度不能大于15位
</div>
</div>
</div>
</form>
</div>
2、表單驗證常見問題及指令
1）、問題：
》如何綁定數(shù)據(jù)——雙向綁定
》驗證表單——正則表達(dá)式
》顯示錯誤信息
》整個Form的驗證
》避免提交沒通過驗證的表單
》防止多次提交
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:字段錯誤信息
formName.inputFieldName.$dirty:字段是否修改
formName.inputFieldName.$pristine:字段是否是初始狀態(tài)
formName.inputFieldName.$valid:字段是否有效
formName.inputFieldName.$invalid:字段是否無效
二、功能實現(xiàn)
2.1 用戶名驗證
用戶輸入用戶名字段驗證主要是長度驗證，以及是否必須
1、ng-model綁定表單數(shù)據(jù)，以便使用angular的驗證api
2、ng-minlength,ng-maxlength規(guī)定字段長段，required規(guī)定字段必填
3、錯誤提示信息通過formName.inputFieldName.$error.minlength/maxlength決定是否要顯示，當(dāng)輸入不合法時，$error對應(yīng)的錯誤信息會為true
如下：
<div class="form-group">
<label for="username" class="col-sm-3 control-label">用戶名</label>
<div class="col-sm-9">
<input type="text" autocomplete="false" name="username" placeholder="用戶名" ng-model="data.username" id="username" ng-minlength="5" ng-maxlength="15" class="form-control" required>
<div class="alert alert-danger help-block" ng-show="myForm.username.$error.minlength">
用戶名長度不能小于5位
</div>
<div class="alert alert-danger help-block" ng-show="myForm.username.$error.maxlength">
用戶名長度不能大于15位
</div>
</div>
</div>
2.2 密碼確認(rèn)驗證
用戶密碼確認(rèn)驗證需要保證兩次輸入的密碼一致，且在未輸入確認(rèn)密碼前不驗證
1、綁定數(shù)據(jù)ng-model=data.pwdConfirm（所有表單數(shù)據(jù)都保存到data對象中）
2、通過判斷data.pwdConfirm!==data.password確定兩次密碼是否輸入一致
3、通過formName.inputField.$dirty確定此項是否填寫過
<div class="form-group">
<label class="col-sm-3 control-label">確認(rèn)密碼</label>
<div class="col-sm-9">
<input type="password" name="pwdConfirm" ng-model="data.pwdConfirm" placeholder="確認(rèn)密碼" id="pwdConfirm" required class="form-control">
<div class="alert alert-danger" ng-show="data.pwdConfirm!==data.password&&myForm.pwd.$dirty">
兩次輸入的密碼不一致
</div>
</div>
</div>
2.3 郵箱驗證
郵箱驗證主要驗證郵箱格式是否正確，字段長度
1、使用H5中新增type屬性值email作為
2、通過ng-pattern指令定義郵箱驗證的正則
3、郵箱驗證常用正則表達(dá)式：^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+
4、通過myForm.email.$error.pattern驗證郵箱格式是否正確
<div class="form-group">
<label class="col-sm-3 control-label">郵箱</label>
<div class="col-sm-9">
<input type="email" name="email" ng-model="data.email" placeholder="郵箱" class="form-control" required ng-pattern="/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/">
<div class="alert alert-danger help-block" ng-show="myForm.email.$error.minlength">
郵箱長度不能小于5位
</div>
<div class="alert alert-danger help-block" ng-show="myForm.email.$error.pattern">
請?zhí)顚懻_的郵箱格式
</div>
<div class="alert alert-danger help-block" ng-show="myForm.email.$error.maxlength">
郵箱長度不能大于30位
</div>
</div>
</div>
2.4 單復(fù)選框
單復(fù)選框主要確定數(shù)據(jù)綁定問題，以及復(fù)選框的數(shù)據(jù)渲染
1、通過以data對象的屬性形式來綁定數(shù)據(jù)
2、多選的選項值通過ng-repeat進(jìn)行遍歷
3、設(shè)置value值以便提交時對值進(jìn)行區(qū)分
<div class="form-group">
<label class="col-sm-3 control-label">性別</label>
<div class="col-sm-9">
<label class="radio-inline">
<input type="radio" name="sex" value="1" ng-model="data.sex" />男
</label>
<label class="radio-inline">
<input type="radio" name="sex" value="0" ng-model="data.sex" />女
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">愛好</label>
<div class="col-sm-9">
<label class="radio-inline" ng-repeat="hobby in hobbies">
<input type="checkbox" name="hobby" ng-model="hobbiesC" value="{{hobby.id}}" /> {{hobby.name}}
</label>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3">
<input type="reset" class=" btn btn-danger" value="重置">
<input type="submit" class="btn btn-primary " value="提交">
</div>
2.5 城市二級聯(lián)動
1、城市數(shù)據(jù)定義：每個城市對象包括id,parent,name屬性，id為每個城市省份獨(dú)有，parent是根據(jù)父級省份或城市而定
2、通過ng-options指令來遍歷出城市數(shù)據(jù)
2.5.1 城市數(shù)據(jù)模型
通過\$scope.cities定義數(shù)據(jù)模型
$scope.cities=[
{
id:1,
parent:0,
name:'四川省'
},
{
id:2,
parent:1,
name:'成都市'
},
...
]
2.5.2 html中渲染城市數(shù)據(jù)
通過ng-options指令和ng-model指令遍歷數(shù)據(jù)和設(shè)置默認(rèn)值
<div class="form-group">
<label class="col-sm-3 control-label">出生地</label>
<div class="col-sm-3">
<select name="birthAddress" id="" ng-model="data.province" ng-options="c.id as c.name for c in cities">
<option value="">-- 請選擇 --</option>
</select>
</div>
</div>
說明：
1、ng-options=”obj.name for obj in datas” 常見用法，通過 obj.id as obj.name設(shè)置option標(biāo)簽的value值為id，內(nèi)容為name
2、ng-model可用于設(shè)置select的默認(rèn)值
2.5.3 定義過濾器用于過濾省份，城市等
.filter("cityFilter",function(){
return function(input,parent){
var filtedData=[];
angular.forEach(input,function(value,key){
if(value.parent===parent){
filtedData.push(value)
}
})
return filtedData;
}
})
說明：
1、如上通過定義cityFilter，傳入一個parent作為參數(shù)，遍歷傳入的數(shù)據(jù)，并寬判斷是否與傳入的parent相等來確定當(dāng)前城市是哪一級
2、返回的filtedData即是過濾結(jié)果。
3、用到了angular.forEach(obj,fn)迭代器，其中fn有三個參數(shù)傳入，分別是value,key,obj；value即為當(dāng)前遍歷出的對象，key為遍歷的唯一標(biāo)識，obj為被遍歷的數(shù)組或?qū)ο蟊旧怼?
使用（省份）： ng-options="c.id as c.name for c in cities|cityFilter:0"
2）、城市對應(yīng)選擇
1、根據(jù)data.province作為過濾參數(shù)，進(jìn)行城市篩選
2、區(qū)域的選擇同理，可設(shè)置當(dāng)選擇了城市后，再出現(xiàn)區(qū)域選項框（ng-show指令）
<div class="col-sm-2">
<select name="birthC" ng-model="data.cities" ng-options="c.id as c.name for c in cities|cityFilter:data.province">
<option value="">-- 請選擇 --</option>
</select>
</div>
<div class="col-sm-2" ng-show="!myForm.birthC.$pristine">
<select name="birthD" ng-model="data.district" ng-options="c.id as c.name for c in cities|cityFilter:data.cities">
<option value="">-- 請選擇 --</option>
</select>
</div>
2.6 表單提交
1、功能需求：當(dāng)表單驗證不通過時，使提交按鈕失效（ng-disabled）,
html結(jié)構(gòu)：
<div class="col-sm-9 col-sm-offset-3">
<input type="reset" class=" btn btn-danger" value="重置" ng-click="reset()">
<input type="submit" class="btn btn-primary " value="提交" ng-disabled="myForm.$invalid">
</div>
js:
$scope.reset=function(){
$scope.myForm.$setPristine();
}
注：表單中有一個$setPristine()方法將表單復(fù)位原始狀態(tài)，class,$dirty,$pristine會恢復(fù)原始狀態(tài)。但注意表單的錯誤信息$error并不會被隱藏，所以在驗證表單時，記得在每一項錯誤信息都是由$dirty才判斷的。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
利用JavaScript的AngularJS庫制作電子名片的方法
這篇文章主要介紹了利用JavaScript的AngularJS庫制作電子名片的方法,其中需要使用到HTML5的canvas畫布,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了SeaJS 與 RequireJS 的差異對比,本文主要對CMD規(guī)范和AMD規(guī)范的弊端做了對比,并做出了一個總結(jié),需要的朋友可以參考下2014-12-12
angularjs指令中的compile與link函數(shù)詳解
這篇文章主要介紹了angularjs指令中的compile與link函數(shù)詳解,本文同時訴大家complie,pre-link,post-link的用法與區(qū)別等內(nèi)容,需要的朋友可以參考下2014-12-12
基于AngularJS實現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能
本文主要給大家介紹基于AngularJS實現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能，通過第三方控件來實現(xiàn)，感興趣的朋友跟著小編一起看看具體實現(xiàn)代碼吧2015-10-10
AngularJs是Google開源的前端JS框架。使用AngularJs, 我們能夠容易地、健壯的開發(fā)出類似于Gmail一樣的單頁Web應(yīng)用。這篇文章主要介紹了詳解angular中如何監(jiān)控dom渲染完畢，有興趣的可以了解一下。2017-01-01
本篇文章主要介紹了Angularjs使用指令做表單校驗的方法，詳細(xì)的介紹了用指令做校驗的方法，具有一定的參考價值，有興趣的可以了解一下。2017-03-03
本文主要介紹AngularJS 路由與多視圖詳解，這里整理了相關(guān)資料及示例代碼，詳細(xì)說明了在開發(fā)過程中如何應(yīng)用，有興趣的朋友可以看下2016-08-08
本文主要介紹AngularJS HTML DOM,這里幫大家整理了詳細(xì)的資料,并附實例代碼詳細(xì)講解,有需要的小伙伴可以參考下2016-07-07
AngularJS動態(tài)添加數(shù)據(jù)并刪除的實例
下面小編就為大家分享一篇AngularJS動態(tài)添加數(shù)據(jù)并刪除的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
本文主要介紹 AngularJS模型，這里詳細(xì)介紹了AngularJS 模型中的知識點(diǎn),并提供實例代碼,有需要的小伙伴可以參考下2016-07-07