詳解AngularJS中的表單驗(yàn)證(推薦)
AngularJS自帶了很多驗(yàn)證,什么必填,最大長(zhǎng)度,最小長(zhǎng)度...,這里記錄幾個(gè)有用的正則式驗(yàn)證
1.使用angularjs的表單驗(yàn)證
正則式驗(yàn)證
只需要配置一個(gè)正則式,很方便的完成驗(yàn)證,理論上所有的驗(yàn)證都可以用正則式完成
//javascript $scope.mobileRegx = "^1(3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9])\\d{8}$"; $scope.emailRegx = "^[a-z]([a-z0-9]*[-_]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,3}([\.][a-z]{2})?$"; $scope.pwdRegx = "[a-zA-Z0-9]*"; <div class="form-group"> <input class="form-control" name="mobile" type="text" ng-model="account.mobile" required ng-pattern="mobileRegx"/> <span class="error" ng-show="registerForm.$submitted && registerForm.mobile.$error.required">*手機(jī)號(hào)不能為空</span> <span class="error" ng-show="registerForm.$submitted && registerForm.mobile.$error.pattern">*手機(jī)號(hào)地址不合法</span> </div> <input type="text" ng-pattern="/[a-zA-Z]/" />
數(shù)字
設(shè)置input的type=number即可
<div class="form-group col-md-6"> <label for="password"> 預(yù)估時(shí)間 </label> <div class="input-group"> <input required type="number" class="form-control" ng-model="task.estimated_time" name="time" /> <span class="input-group-addon">分鐘</span> </div> <span class="error" ng-show="newTaskForm.$submitted && newTaskForm.time.$error.required">*請(qǐng)預(yù)估時(shí)間</span> </div>
郵箱
<input type="email" name="email" ng-model="user.email" />
URL
<input type="url" name="homepage" ng-model="user.facebook_url" />
效果
效果是實(shí)時(shí)的,很帶感
2.使用ngMessages驗(yàn)證表單
相對(duì)于上面的每個(gè)驗(yàn)證都要自己寫代碼判斷,ngMessages提供了一種更為簡(jiǎn)潔的方式
https://docs.angularjs.org/api/ngMessages/directive/ngMessages
angular.module('ngMessagesExample', ['ngMessages']); <form name="myForm"> <label> Enter your name: <input type="text" name="myName" ng-model="name" ng-minlength="5" ng-maxlength="20" required /> </label> <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre> <!--需要配合 ng-if使用,否則一開始就顯示出來(lái)了, 你摸了就會(huì)觸發(fā)驗(yàn)證--> <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert" ng-if="myForm.myName.$touched"> <div ng-message="required">You did not enter a field</div> <div ng-message="minlength">Your field is too short</div> <div ng-message="maxlength">Your field is too long</div> </div> </form>
簡(jiǎn)直是第二次解放啊。。。
2.動(dòng)態(tài)生成的表單的驗(yàn)證
如果你有一部分form的內(nèi)容是動(dòng)態(tài)生成的,數(shù)量和名字都不確定的時(shí)候,該如何驗(yàn)證這些生成的元素呢?其實(shí)維護(hù)一個(gè)動(dòng)態(tài)的form本來(lái)就是個(gè)問(wèn)題。但是在angular中,只需要記住一點(diǎn):準(zhǔn)備好你的數(shù)據(jù),其他的交給angular。像下面這個(gè)例子,你只需要維護(hù)好一個(gè)數(shù)組,然后利用ng-repeat就可以快速的呈現(xiàn)到頁(yè)面上。
其實(shí)動(dòng)態(tài)的form和一般的form驗(yàn)證都是一致的,只是動(dòng)態(tài)的form需要使用myForm[inout_name].$error的形式訪問(wèn)
<!-- 動(dòng)態(tài)顯示狀態(tài)的負(fù)責(zé)人 --> <div class="form-group col-md-6" ng-repeat="sta in task.status_table | orderBy : sta.sequence_order"> <label>{{sta.status_name}} 負(fù)責(zé)人</label> <select required class="form-control" ng-model="sta.user_id" ng-options="qa.id as qa.last_name+' '+qa.last_name for qa in taskUserList" name="{{sta.status_name}}"> </select> <div ng-messages="newTaskForm[sta.status_name].$error" ng-if="newTaskForm.$submitted || newTaskForm[sta.status_name].$touched"> <p class="error" ng-message="required">*請(qǐng)選擇負(fù)責(zé)人</p> </div> </div>
3. 必填項(xiàng)加亮顯
有些表單我們不希望粗暴的在下面添加文字信息提示驗(yàn)證,而是希望更簡(jiǎn)潔的方式,如:加亮邊框,突出顯示
需要做的只是在required驗(yàn)證沒(méi)通過(guò)的時(shí)候添加class,改變?cè)氐臉邮郊纯?/p>
<form name="loginForm" novalidate ng-submit="loginPost()" class="navbar-form navbar-right" ng-hide="login"> <fake-autocomplete></fake-autocomplete> <div class="form-group"> <input name="user_name" required maxlength="50" type="text" class="form-control" placeholder="手機(jī)號(hào)或郵箱" ng-model="account.user_name" ng-class="{warn:loginForm.$submitted && loginForm.user_name.$error.required}"> </div> <div class="form-group"> <input name="password" required type="password" maxlength="50" placeholder="密碼" ng-model="account.password" ng-class="{'form-control':1,warn:loginForm.$submitted && loginForm.password.$error.required}"> </div> <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-lock"></span> 登錄</button> </form> .warn { border-color: #f78d8d !important; outline: 0 !important; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgb(239, 154, 154) !important; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(239, 154, 154) !important; }
以上所述是小編給大家介紹的詳解AngularJS中的表單驗(yàn)證,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
angular實(shí)現(xiàn)form驗(yàn)證實(shí)例代碼
本篇文章主要介紹了angular實(shí)現(xiàn)form驗(yàn)證實(shí)例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下。2017-01-01Angular 4環(huán)境準(zhǔn)備與Angular cli創(chuàng)建項(xiàng)目詳解
Angular4.0來(lái)了,更小,更快,改動(dòng)少,所以下面這篇文章主要給大家介紹了關(guān)于Angular 4環(huán)境準(zhǔn)備與學(xué)會(huì)使用Angular cli創(chuàng)建項(xiàng)目的相關(guān)資料,文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí),需要的朋友們下面來(lái)一起看看吧。2017-05-05Angular實(shí)現(xiàn)的table表格排序功能完整示例
這篇文章主要介紹了Angular實(shí)現(xiàn)的table表格排序功能,結(jié)合完整實(shí)例形式分析了AngularJS表格排序所涉及的事件響應(yīng)、元素遍歷、屬性修改等相關(guān)操作技巧,需要的朋友可以參考下2017-12-12AngularJs用戶登錄問(wèn)題處理(交互及驗(yàn)證、阻止FQ處理)
這篇文章主要為大家詳細(xì)介紹了AngularJs用戶登錄問(wèn)題處理,包括交互及驗(yàn)證、阻止FQ處理,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10AngularJS使用帶屬性值的ng-app指令實(shí)現(xiàn)自定義模塊自動(dòng)加載的方法
這篇文章主要介紹了AngularJS使用帶屬性值的ng-app指令實(shí)現(xiàn)自定義模塊自動(dòng)加載的方法,結(jié)合實(shí)例形式分析了ng-app自動(dòng)加載我們自定義的模塊作為根模塊的操作步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-01-01Angular客戶端請(qǐng)求Rest服務(wù)跨域問(wèn)題的解決方法
本篇文章主要介紹了Angular客戶端請(qǐng)求Rest服務(wù)跨域問(wèn)題的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09