huangwei的gravatar头像
huangwei 2015-05-20 22:26:51

js正则表达式校验输入字符串是否是手机号码

js 如何校验手机号码呢?

手机号有如下规则:

(1)必须全为数字;

(2)必须是11位.(有人说还有10位的手机号,这里先不考虑);

(3)必须以1开头(有人见过以2开头的手机号吗?)

(4)第2位是34578中的一个.

js方法如下:

/***
 * check mobile phone:(1)must be digit;(2)must be 11
 * @param string
 * @returns {boolean}
 */
telRuleCheck2 = function (string) {
	var pattern = /^1[34578]\d{9}$/;
	if (pattern.test(string)) {
		return true;
	}
	console.log('check mobile phone ' + string + ' failed.');
	return false;
};

通过正则表达式来校验

页面代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="application/javascript" src="jquery-1.11.1.js" ></script>
    <script type="application/javascript" src="comm.js" ></script>
</head>
<body>
<div class="reg_con" style="position:relative;">
    <label>联系电话</label>
    <input id="telphone" type="text" name="userExt.telphone" value="13800000000" class="inp" maxlength="13"/>

    <div id="telphone_tip" style="position:absolute;top:20px; color:#c00; font-weight:bold;">
    </div>
</div>
<script type="application/javascript" >
    $("#telphone").blur("blur",function(){
        var telphone = $("#telphone").val();
        if(telphone == ""){
            $("#telphone_tip").html("提示:联系电话不能为空");
        }
        else
        {
            if(telRuleCheck2(telphone)){
                $("#telphone_tip").html("");
            }
            else
            {
                $("#telphone_tip").html("联系电话格式不正确");
            };
        };
    });

</script>
</body>
</html>

界面如下:
js正则表达式校验输入字符串是否是手机号码
 正则表达式说几点:

(1)^表示开头 ; $ 表示结尾;

(2)i表示忽略大小写;g表示全局匹配,而不是只匹配一次

(3)\d表示数字,即0123456789,\w表示26个字母;\s表示空格Tab换行等

 

进行web前端开发,会经常遇到校验文本框内容的情形.比如校验用户输入的手机号是否合法.

其实我们可以从根本上减少用户犯错的机会,比如文本框只能输入数字,若输入非数字字符,则马上被删除.

(现在让用户填写日期时都不会让用户手敲了,而是让用户从下拉框中选择,这同样是为了减少用户犯错的机会)

界面:
js正则表达式校验输入字符串是否是手机号码
 第一个文本框,输入字母时会立即被替换为空字符串.

核心js方法

/*
 * 只能输入正整数,不能有小数点
 * 
 */
onlyIntegerKeyUp=function(e){
	if(e===undefined){
		e=window.event;
	}
	var obj=e.srcElement?e.srcElement:e.target;
	var pattern = /[^\d]/ig;
	var val=obj.value;
	if(pattern.test(val)) {
		var i=getCursortPosition(e);
		obj.value=val.replace(pattern,'');
		setCaretPosition(e,i);
	}
};
/*******************************************************************************
 * 获取光标位置
 * 
 * @param ctrl
 * @returns {Number}
 */
getCursortPosition=function(event) {// 获取光标位置函数
	if (event === undefined || event === null) {
		event = arguments.callee.caller.arguments[0] || window.event;
	}
	var obj = event.srcElement?event.srcElement:event.target;
	var CaretPos = 0;	// IE Support
	if (document.selection) {
		obj.focus ();
		var Sel = document.selection.createRange ();
		Sel.moveStart ('character', -obj.value.length);
		CaretPos = Sel.text.length;
	} else if (obj.selectionStart || obj.selectionStart == '0'){
		// Firefox support
		CaretPos = obj.selectionStart;
	}

	return (CaretPos);
};
/*******************************************************************************
 * 设置光标位置
 * 
 * @param ctrl
 * @returns {Number}
 */
setCaretPosition=function(event, pos){// 设置光标位置函数
	if (event === undefined || event === null) {
		event = arguments.callee.caller.arguments[0] || window.event;
	}
	var obj = event.srcElement?event.srcElement:event.target;
	if (pos > 0) {
		pos = pos - 1;//因为把不匹配的字符删除之后,光标会往后移动一个位置
	}
	if(obj.setSelectionRange){
		obj.focus();
		obj.setSelectionRange(pos,pos);
	} else if (obj.createTextRange) {
		var range = obj.createTextRange();
		range.collapse(true);
		range.moveEnd('character', pos);
		range.moveStart('character', pos);
		range.select();
	}
};
/*
 * 只能输入数字和字母
 * 
 */
onlyNumAndAlphKeyUp=function(event){
	if(event===undefined){
		event=window.event;
	}
	var obj=event.srcElement?event.srcElement:event.target;
	var pattern = /[^\w]/ig;
	if(pattern.test(obj.value)) {
		var i=getCursortPosition(event);
		obj.value=obj.value.replace(pattern,'');
		setCaretPosition(event,i);
	}
};

页面代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="application/javascript" src="jquery-1.11.1.js"></script>
    <script type="application/javascript" src="comm.js"></script>
</head>
<body>
只能输入数字: <input type="text" onkeyup="onlyIntegerKeyUp(event)"/><br>
<br>
只能输入数字和字母: <input type="text" onkeyup="onlyNumAndAlphKeyUp(event)"/><br>
</body>
</html>

为什么会有getCursortPosition()和setCaretPosition() 

因为通过js替换非法字符之后,光标的位置变化了.所以这两个方法用于在替换之前保存(记录)光标位置,替换之后恢复光标位置.

comm.js见附件

演示地址:http://123.57.250.51/static/js/keyup.html


打赏

文件名:comm.zip,文件大小:5.952K 下载
  • /
    • /comm.js
最代码最近下载分享源代码列表最近下载
wjh12345654321  LV14 2022年8月3日
yangxue  LV1 2015年11月13日
微微上翘  LV23 2015年11月6日
dreamwhere  LV13 2015年8月14日
最代码最近浏览分享源代码列表最近浏览
huilenet  LV15 2022年9月5日
baizhongcai  LV24 2022年8月26日
wjh12345654321  LV14 2022年8月3日
这不是一只柚子吗  LV6 2021年4月6日
lxj  LV5 2019年11月12日
求学者小白 2019年8月26日
暂无贡献等级
zml123  LV5 2019年3月14日
zhanghui0413  LV2 2019年3月14日
天险无涯  LV15 2019年2月21日
景哥GG 2018年12月27日
暂无贡献等级
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友