`

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>

界面如下:

 正则表达式说几点:

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

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

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

 

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

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

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

界面:

 第一个文本框,输入字母时会立即被替换为空字符串.

核心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

0
3
分享到:
评论

相关推荐

    js正则表达式校验指定字符串的方法

    今天小编就为大家分享一篇js正则表达式校验指定字符串的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    2019手机号码JS正则表达式验证实例代码

    正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑。 简介 正则表达式是对字符串...

    Js中使用正则表达式验证输入是否有特殊字符

    Js中使用正则表达式验证输入是否有特殊字符的代码如下所示: //验证是否有特殊字符 function checkval(t) { var re = /^[\u4e00-\u9fa5a-z]+$/gi;//只能输入汉字和英文字母 if (re.test(t)) { return true; } ...

    正则表达式学习-正则语法

    正则表达式常用于字符串的搜索、替换、分割和校验等操作。 正则表达式由普通字符(例如,字母和数字)和特殊字符(称为“元字符”)组成。以下是一些常用的正则表达式元字符和它们的作用: .:匹配除换行符以外的...

    JS正则表达式必须包含数字、字母、特殊字符

    主要介绍了JS正则表达式必须包含数字、字母、特殊字符的相关资料,文中还给大家提到了js 正则表达式 匹配除汉字,字母,数字,逗号,句号外的特殊字符(用来规范输入内容)需要的朋友可以参考下

    js中过滤特殊字符的正则表达式

    js中用正则表达式 过滤特殊字符 ,校验所有输入域是否含有特殊符号

    JS正则表达式验证中文字符

    例如正则表达式^123能够匹配字符串”12345″的开始,但是不能匹配”012345″; [\u4e00-\u9fa5] 指匹配在这两个Unicode编码之间的字符; {0,} 重复0到无限次; $以它为结束,如123$就是只匹配以123结尾的。1234则不能...

    javascript正则表达式基础篇

    主要是介绍javascript正则表达式的一些基础知识,主要是介绍javascript的正则书写方法与常用实例,需要的朋友可以参考下

    JavaScript正则表达式验证代码(推荐)

    正则表达式描述了字符的模式对象。可以使用正则表达式来描述要检索的内容。 简单的模式可以是一个单独的字符。更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等等。 //判断输入内容是否为空 ...

    javascript的正则表达式

    除了可以校验数据,还可以提取一些想要的固定模式数据,还可以替换数据 – 替换字符串(正则表达式主要用于字符串的处理 ) 正则表达式就是一个模式,可以用来校验、提取、替换数据。(正则可以任何语言中使用) ...

    正则表达式

    当一个正则表达式成功地和目标字符串相匹配时,可以从目标串中抽出和括号中的子模式相匹配 的部分.例如,假定我们正在检索的模式是一个或多个字母后面跟随一位或多位数字,那么我们可以使用模式 / [a-z] + \ d+/.但是...

    js校验特殊字符

    2. * 校验所有输入域是否含有特殊符号 3. * 所要过滤的符号写入正则表达式中,注意,一些符号要用'\'转义. 4. * 要转义的字符包括:1, 点号 . 5. * 2, 中括号 [] 6. * 3, 大括号 {} 7. * 4, 加号 + 8. ...

    模仿SQL语句的正则表达式

    模仿SQL语句的正则表达式练习,是我学习正则表达式过程中,对字符串经常sql语句匹配,达到练习正则表达式的目的。语句中包括了,"创建超级用户权限,"*.*"代表数据库里的所有数据,"root"代表超级用户名称,"%"代表...

    C# 最全的日期正则表达式,没有之一

    如果可以在源字符串中唯一定位yyyy-MM-dd格式的日期,则可用做提取。 对于验证,如果仅仅是验证字符组成及格式是没有多大意义的,还要加入对规则的校验。由于闰年的存在,使得日期的校验正则变得比较复杂。 先来考察...

    Javascript校验密码复杂度的正则表达式

    请问是在js中如何写这样的正则表达式? 测试字符串:a123456- 解决方法如下所示: 把\d改为[0-9]问题就解决了,正则表达式如下: 代码如下: var regex = new RegExp(‘(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9...

    js利用正则表达式检验输入内容是否为网址

    主要为大家详细介绍了js利用正则表达式检验输入内容是否为网址的相关方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    正则表达式全集,各种验证

    很全的正则表达式验证,js前端很方便的验证

    js判断是否有6个连续数字的字符串的正则

    js 字符串转换成数字的三种方法js字符串转换成数字与数字转换成字符串的实现方法js实现在字符串中提取数字JavaScript数字和字符串转换示例javaScript 判断字符串是否为数字的简单方法javascript中的数字与字符串相加...

    JS 正则表达式从地址中提取省市县

    主要介绍了JS 正则表达式从地址中提取省市县的实例代码,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下

Global site tag (gtag.js) - Google Analytics