angularjs+ionic注冊(cè)頁(yè)面表單驗(yàn)證

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 20:24:12

angularjs+ionic注冊(cè)頁(yè)面表單驗(yàn)證

angularjs+ionic注冊(cè)頁(yè)面表單驗(yàn)證:在已建立tabs和路由的注冊(cè)頁(yè)面html：功能：進(jìn)行了手機(jī)號(hào)、密碼格式驗(yàn)證，兩次密碼輸入是否相同的判斷，都正確且復(fù)選框勾選后才可點(diǎn)擊注冊(cè)，進(jìn)入tabs.mypage頁(yè)面。未進(jìn)行驗(yàn)證碼真正發(fā)送、獲取后臺(tái)驗(yàn)證碼數(shù)據(jù)與輸入驗(yàn)證碼進(jìn)行對(duì)比。使用：4-- novalid

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀angularjs+ionic注冊(cè)頁(yè)面表單驗(yàn)證:在已建立tabs和路由的注冊(cè)頁(yè)面html：功能：進(jìn)行了手機(jī)號(hào)、密碼格式驗(yàn)證，兩次密碼輸入是否相同的判斷，都正確且復(fù)選框勾選后才可點(diǎn)擊注冊(cè)，進(jìn)入tabs.mypage頁(yè)面。未進(jìn)行驗(yàn)證碼真正發(fā)送、獲取后臺(tái)驗(yàn)證碼數(shù)據(jù)與輸入驗(yàn)證碼進(jìn)行對(duì)比。使用：4-- novalid

在已建立tabs和路由的注冊(cè)頁(yè)面html：

功能：

進(jìn)行了手機(jī)號(hào)、密碼格式驗(yàn)證，兩次密碼輸入是否相同的判斷，都正確且復(fù)選框勾選后才可點(diǎn)擊注冊(cè)，進(jìn)入tabs.mypage頁(yè)面。

未進(jìn)行驗(yàn)證碼真正發(fā)送、獲取后臺(tái)驗(yàn)證碼數(shù)據(jù)與輸入驗(yàn)證碼進(jìn)行對(duì)比。

使用：

4-- novalidate：禁止執(zhí)行<form>表單原生校驗(yàn)，避免與自己設(shè)置的校驗(yàn)方法起沖突

7-- type="number"：限定輸入數(shù)字類(lèi)型；required：限定不能為空；ng-minlength/ng-maxlength：限定輸入字符最小、最大長(zhǎng)度

11-- type="password"：語(yǔ)義化，密碼格式；ng-pattern="/[a-zA-Z0-9]/"：用正則限定輸入數(shù)字或字母

20-- ng-click="getTestCode()"：綁定點(diǎn)擊事件；ng-bind="description"：控制按鈕顯示文字；ng-disabled="canClick"：控制按鈕可用性，避免短時(shí)間內(nèi)多次請(qǐng)求

25-- ng-show=""：根據(jù)條件顯示提示文字；registerForm.number：name為registerForm的<form>表單中name為number的<input>輸入框；$dirty：<input>輸入框已與用戶(hù)進(jìn)行交互；$invalid：<input>輸入框內(nèi)容未通過(guò)自己設(shè)置的校驗(yàn)。

33-- ng-disabled="registerForm.$invalid"：<form>表單都通過(guò)了校驗(yàn)，才可用

注意：不要在<label>標(biāo)簽里添加點(diǎn)擊事件?。?/p>

 手機(jī)號(hào) 輸入密碼 確認(rèn)密碼 驗(yàn)證碼 手機(jī)號(hào)輸入有誤 密碼輸入格式有誤 兩次密碼輸入不一致 同意發(fā)貨么用戶(hù)協(xié)議 注冊(cè)

在路由綁定的控制器js：

功能：點(diǎn)擊觸發(fā)獲取驗(yàn)證碼函數(shù)，在倒計(jì)時(shí)59s期間不可再次發(fā)送請(qǐng)求。

注意：記得在控制器中注入$interval

 1 $scope.canClick=false; 2 $scope.description="獲取驗(yàn)證碼"; 3 var second=59; 4 var timerHandler; 5 $scope.getTestCode=function(){10 timerHandler=$interval(function(){11 if(second<=0){12 $interval.cancel(timerHandler);13 second=59;14 $scope.description="獲取驗(yàn)證碼";15 $scope.canClick=false;16 }else{17 $scope.description=second+"s后重發(fā)";18 second--;19 $scope.canClick=true;20 }21 },1000)22 };