angular.js - ng-pattern 验证问题
本文介绍了angular.js - ng-pattern 验证问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
$scope.regex = /^1[34578]d{9}$/;
1.对手机号进行了验证
2.现在添加的时候会进行验证
3.但是编辑的时候,如果之前的手机号填写有错,不会提示,这样保存的时候会出错。
保存时是这样判断的
解决方案
要想要 input输入的时候验证
+ form提交的时候验证
:
第一步:给要验证的 input
添加 onkeyup
事件,在键盘松开的时候触发验证
第二步:给 form
添加 onsubmit
事件,在表单提交的时候做验证
下面是一个范例: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();
};
这篇关于angular.js - ng-pattern 验证问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文