問(wèn)題描述

$scope.regex = /^1[34578]d{9}$/;

1.對(duì)手機(jī)號(hào)進(jìn)行了驗(yàn)證2.現(xiàn)在添加的時(shí)候會(huì)進(jìn)行驗(yàn)證3.但是編輯的時(shí)候，如果之前的手機(jī)號(hào)填寫(xiě)有錯(cuò)，不會(huì)提示，這樣保存的時(shí)候會(huì)出錯(cuò)。保存時(shí)是這樣判斷的

問(wèn)題解答

要想要 input輸入的時(shí)候驗(yàn)證 + form提交的時(shí)候驗(yàn)證：第一步：給要驗(yàn)證的 input 添加 onkeyup 事件，在鍵盤(pán)松開(kāi)的時(shí)候觸發(fā)驗(yàn)證第二步：給 form 添加 onsubmit 事件，在表單提交的時(shí)候做驗(yàn)證

下面是一個(gè)范例：HTML：

<form action=’url’ id=’login_form’> 手機(jī)號(hào)：<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}$/;// 檢測(cè)手機(jī)號(hào)碼var checkUserPhoneNum = function(){ var phoneVal = phoneNum.value;// 表單驗(yàn)證 if (!phoneReg.test(phoneVal)) {return false; }return true;};// 手機(jī)號(hào)碼輸入的時(shí)候驗(yàn)證phoneNum.onkeyup = function(){ if (!checkUserPhoneNum()){// 手機(jī)號(hào)碼不正確的時(shí)候要做的事情....return ; }// 手機(jī)號(hào)碼正確的時(shí)候要做的事情....};// 表單提交form.onsubmit = function(event){ // 首先阻止表單提交 event.preventDefault();// 手機(jī)號(hào)碼驗(yàn)證 if (!checkUserPhoneNum()){console.log(’請(qǐng)輸入正確的11位手機(jī)號(hào)碼’);return ; } // 通過(guò)驗(yàn)證，則提交表單 this.submit();};回答2：

可以改成：

if ($scope.userform.$dirty && $scope.userform.$invalid) {}

其實(shí)當(dāng)無(wú)任何變更時(shí) $scope.userform.$dirty 時(shí)不允許提交，這也算是合理的。

========UPDATE========

你的form寫(xiě)法有很大的問(wèn)題。

angular表單自身是包含著大部分html5表單元素的驗(yàn)證，比如：required。要想啟用它，需要給from加上 ng-submit='adduserinfo()'，既然有驗(yàn)證模型，那就去掉瀏覽器自身的驗(yàn)證，再加上 novalidate。

既然表單加上提交動(dòng)作，那么確定按鈕就不需要任何跟事件有關(guān)的東西了。

<form name='userform' novalidate ng-submit='adduserinfo()' id='user_form'> <button type='submit'>確定</button></form>

其實(shí)angular自身的驗(yàn)證模型還是非常豐富，特別是有正則表達(dá)式，可以做的事非常多。

試試把ng-pattern='/^1/'(你寫(xiě)的regex)直接寫(xiě)在界面上 不要用變量定義