angular.js - ng-pattern 驗(yàn)證問題
問題描述
$scope.regex = /^1[34578]d{9}$/;
1.對手機(jī)號進(jìn)行了驗(yàn)證2.現(xiàn)在添加的時候會進(jìn)行驗(yàn)證3.但是編輯的時候,如果之前的手機(jī)號填寫有錯,不會提示,這樣保存的時候會出錯。保存時是這樣判斷的
問題解答
回答1:要想要 input輸入的時候驗(yàn)證 + form提交的時候驗(yàn)證:第一步:給要驗(yàn)證的 input 添加 onkeyup 事件,在鍵盤松開的時候觸發(fā)驗(yàn)證第二步:給 form 添加 onsubmit 事件,在表單提交的時候做驗(yàn)證
下面是一個范例:HTML:
<form action=’url’ id=’login_form’> 手機(jī)號:<input type=’number’ name=’phone’ /> 提交:<input type=’submit’ value=’提交’ /></form>
Javascript
var form = document.forms[’login_form’]var phoneNum = form.elements[’phone’];var phoneReg = /^1[34578]d{9}$/;// 檢測手機(jī)號碼var checkUserPhoneNum = function(){ var phoneVal = phoneNum.value;// 表單驗(yàn)證 if (!phoneReg.test(phoneVal)) {return false; }return true;};// 手機(jī)號碼輸入的時候驗(yàn)證phoneNum.onkeyup = function(){ if (!checkUserPhoneNum()){// 手機(jī)號碼不正確的時候要做的事情....return ; }// 手機(jī)號碼正確的時候要做的事情....};// 表單提交form.onsubmit = function(event){ // 首先阻止表單提交 event.preventDefault();// 手機(jī)號碼驗(yàn)證 if (!checkUserPhoneNum()){console.log(’請輸入正確的11位手機(jī)號碼’);return ; } // 通過驗(yàn)證,則提交表單 this.submit();};回答2:
可以改成:
if ($scope.userform.$dirty && $scope.userform.$invalid) {}
其實(shí)當(dāng)無任何變更時 $scope.userform.$dirty 時不允許提交,這也算是合理的。
========UPDATE========
你的form寫法有很大的問題。
angular自帶html5屬性的驗(yàn)證模型angular表單自身是包含著大部分html5表單元素的驗(yàn)證,比如:required。要想啟用它,需要給from加上 ng-submit='adduserinfo()',既然有驗(yàn)證模型,那就去掉瀏覽器自身的驗(yàn)證,再加上 novalidate。
既然表單加上提交動作,那么確定按鈕就不需要任何跟事件有關(guān)的東西了。
<form name='userform' novalidate ng-submit='adduserinfo()' id='user_form'> <button type='submit'>確定</button></form>
其實(shí)angular自身的驗(yàn)證模型還是非常豐富,特別是有正則表達(dá)式,可以做的事非常多。
回答3:試試把ng-pattern='/^1/'(你寫的regex)直接寫在界面上 不要用變量定義
相關(guān)文章:
1. mysql - 如何在有自增id的情況下,讓其他某些字段能不重復(fù)插入2. Python2中code.co_kwonlyargcount的等效寫法3. mysql - 請問數(shù)據(jù)庫字段為年月日,傳進(jìn)的參數(shù)為月,怎么查詢那個月所對應(yīng)的數(shù)據(jù)4. 求救一下,用新版的phpstudy,數(shù)據(jù)庫過段時間會消失是什么情況?5. javascript - vue+iview upload傳參失敗 跨域問題后臺已經(jīng)解決 仍然報(bào)403,這是怎么回事啊?6. html - 移動端radio無法選中7. javascript - 我的站點(diǎn)貌似被別人克隆了, google 搜索特定文章,除了域名不一樣,其他的都一樣,如何解決?8. [python2]local variable referenced before assignment問題9. php - 微信開發(fā)驗(yàn)證服務(wù)器有效性10. node.js - win 下 npm install 遇到了如下錯誤 會導(dǎo)致 無法 run dev么?
