撰写时间:2019年07月06日
用正则表达式限制数据的输入,用以减少错误数据的输入,或者减少因为输入数据类型的不对应导致后期代码的出错。
例子:验证手机号码
每个运营商都发行了各自的手机号段,目前中国移动现在拥有23个号段,中国联通拥有16个号段,中国电信拥有13个号段
验证手机号码是否真实,就通过正则表达式验证手机号段
需要达到的效果:
存在的号段正常显示:
乱填不存在的号段显示提示:
HTML:
<label class="name">手机号码:</label>
<input type="text" id="MobilePhone" name="MobilePhone" maxlength="13" onkeyup="jointPhone(this.value)" onblur="verifyPhone(this.value)" />
JS:
<script src="${ctx}/content/layer/layer.js"></script>
键抬起时事件:οnkeyup=“jointPhone(this.value)”
这个方法包含:限制除了数字跟字符‘-’的输入,拼接自定义号码格式xxx-xxxx-xxxx
//-------------------- 拼接手机 -------------------
function jointPhone(value){
var theinput=value;
var p2=/[^0-9\-]/g
if(p2.test(theinput)==true) {
document.getElementById("MobilePhone").value="";
}else{
var arr = theinput.split('');
if (arr.length >= 4&&arr[3]!="-") {
arr.splice(3, 0, '-');
}
if (arr.length >= 9&&arr[8]!="-") {
arr.splice(8, 0, '-');
}
var input= arr.join('');
document.getElementById("MobilePhone").value=input;
}
}
输入框限制了最大长度maxlength=“13”,手机号码是十一位,因为拼接了“-”所以这里设置了十三位。
失去焦点触发事件:οnblur=“verifyPhone(this.value)”
正则表达式验证各个运营商已发行的号段
//-------------------- 手机验证 -------------------
function verifyPhone(value){
var phone=value;
var p1=/^(13[0-9]|14[56789]|15[0-3,5-9]|166|17[0135678]|18[0-9]|19[89])\-\d{4}\-\d{4}$/;
if(p1.test(value)==false){
layer.tips('请输入有效号码', '#MobilePhone');
}
}
如果需要其他格式例如空格:177 8894 3934
验证输入的电话号码格式xxx xxxx xxxx 或xxx-xxxx-xxxx
改一下拼接的字符为:””
验证号码正则两个格式如下:
空:/^(13[0-9]|14[56789]|15[0-3,5-9]|166|17[0135678]|18[0-9]|19[89])\s\d{4}\s\d{4}$/
-:/^(13[0-9]|14[56789]|15[0-3,5-9]|166|17[0135678]|18[0-9]|19[89])\-\d{4}\-\d{4}$/
限制输入字符正则表达式如下:
验证只能输入数字跟空格 或数字跟“-”
空格:/[^0-9\s]/g 或 /[^\d\s]/g
符号“-”:/[^0-9\-]/g 或 /[^\d\-]/g
正则表达式加上参数g之后,表明可以进行全局匹配,注意这里“可以”的含义。
1)对于表达式对象的exec方法,不加入g,则只返回第一个匹配,无论执行多少次均是如此,如果加入g,则第一次执行也返回第一个匹配,再执行返回第二个匹配,依次类推
^:开始位置
&:结束位置
[^]:放入中括号就是非或者排除的意思