84669 Lernen von Personen
152542 Lernen von Personen
20005 Lernen von Personen
5487 Lernen von Personen
7821 Lernen von Personen
359900 Lernen von Personen
3350 Lernen von Personen
180660 Lernen von Personen
48569 Lernen von Personen
18603 Lernen von Personen
40936 Lernen von Personen
1549 Lernen von Personen
1183 Lernen von Personen
32909 Lernen von Personen
$scope.regex = /^1[34578]d{9}$/;
1.对手机号进行了验证2.现在添加的时候会进行验证3.但是编辑的时候,如果之前的手机号填写有错,不会提示,这样保存的时候会出错。保存时是这样判断的
要想要 input输入的时候验证 + form提交的时候验证:第一步:给要验证的 input 添加 onkeyup 事件,在键盘松开的时候触发验证第二步:给 form 添加 onsubmit 事件,在表单提交的时候做验证
input输入的时候验证
form提交的时候验证
input
onkeyup
form
onsubmit
下面是一个范例:HTML:
HTML:
<form action='url' id='login_form'> 手机号:<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}$/; // 检测手机号码 var checkUserPhoneNum = function(){ var phoneVal = phoneNum.value; // 表单验证 if (!phoneReg.test(phoneVal)) { return false; } return true; }; // 手机号码输入的时候验证 phoneNum.onkeyup = function(){ if (!checkUserPhoneNum()){ // 手机号码不正确的时候要做的事情.... return ; } // 手机号码正确的时候要做的事情.... }; // 表单提交 form.onsubmit = function(event){ // 首先阻止表单提交 event.preventDefault(); // 手机号码验证 if (!checkUserPhoneNum()){ console.log('请输入正确的11位手机号码'); return ; } // 通过验证,则提交表单 this.submit(); };
可以改成:
if ($scope.userform.$dirty && $scope.userform.$invalid) {}
其实当无任何变更时 $scope.userform.$dirty 时不允许提交,这也算是合理的。
$scope.userform.$dirty
========UPDATE========
你的form写法有很大的问题。
angular表单自身是包含着大部分html5表单元素的验证,比如:required。要想启用它,需要给from加上 ng-submit="adduserinfo()",既然有验证模型,那就去掉浏览器自身的验证,再加上 novalidate。
ng-submit="adduserinfo()"
novalidate
既然表单加上提交动作,那么确定按钮就不需要任何跟事件有关的东西了。
<form name="userform" novalidate ng-submit="adduserinfo()" id="user_form"> <button class="studentadd" type="submit">确定</button> </form>
其实angular自身的验证模型还是非常丰富,特别是有正则表达式,可以做的事非常多。
试试把ng-pattern="/^1/"(你写的regex)直接写在界面上 不要用变量定义
要想要
input输入的时候验证
+form提交的时候验证
:第一步:给要验证的
input
添加onkeyup
事件,在键盘松开的时候触发验证第二步:给
form
添加onsubmit
事件,在表单提交的时候做验证下面是一个范例:
HTML:
Javascript
可以改成:
其实当无任何变更时
$scope.userform.$dirty
时不允许提交,这也算是合理的。========UPDATE========
你的form写法有很大的问题。
angular自带html5属性的验证模型
angular表单自身是包含着大部分html5表单元素的验证,比如:required。要想启用它,需要给from加上
ng-submit="adduserinfo()"
,既然有验证模型,那就去掉浏览器自身的验证,再加上novalidate
。既然表单加上提交动作,那么确定按钮就不需要任何跟事件有关的东西了。
其实angular自身的验证模型还是非常丰富,特别是有正则表达式,可以做的事非常多。
试试把ng-pattern="/^1/"(你写的regex)直接写在界面上 不要用变量定义