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>
相关文章
|
26天前
|
JavaScript 前端开发 Java
如何使用这个正则表达式来验证一个字符串是否符合特定的格式要求?
如何使用这个正则表达式来验证一个字符串是否符合特定的格式要求?
|
15天前
|
Java API 索引
U4字符串以及正则表达式
【10月更文挑战第19天】在 Java 中,字符串是重要数据类型,支持多种操作如长度获取、字符访问、子串提取等。正则表达式提供强大的模式匹配和文本处理功能,通过 `Pattern` 和 `Matcher` 类实现。示例代码展示了如何使用正则表达式匹配单词字符。常用语法包括字符类、数量词、边界匹配和分组。
|
24天前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
58 1
|
2月前
|
JavaScript 前端开发
js_Ipv4以及ipv4段正则校验
几种JavaScript正则表达式,用于校验IPv4地址的有效性,包括支持CIDR表示法的变体。
47 4
|
3月前
|
JavaScript 前端开发
js中通过正则表达式验证邮箱是否合法
这篇文章提供了一个JavaScript示例,通过正则表达式在网页上验证用户输入的邮箱地址是否合法,并给出了相应的提示信息。
js中通过正则表达式验证邮箱是否合法
|
3月前
|
前端开发 JavaScript 数据安全/隐私保护
前端JS正则校验密码之3种实现方式
这篇文章展示了三种使用JavaScript正则表达式来校验密码的方法,密码需要满足包含大写字母、小写字母、数字及特殊字符,并在8到16位之间,同时提供了示例代码和实现效果。
85 1
前端JS正则校验密码之3种实现方式
|
2月前
|
JavaScript 前端开发 Java
使用这个正则表达式来验证一个字符串是否符合特定的格式要求
使用这个正则表达式来验证一个字符串是否符合特定的格式要求
119 5
|
2月前
|
Java 数据库连接 测试技术
自定义校验注解,优雅的实现手机号,身份证号的格式校验!
本文介绍了如何创建自定义校验注解来实现手机号和身份证号的格式校验,包括定义注解、实现校验逻辑、将注解应用于模型类,以及常用的校验器库和框架,旨在提高代码的可维护性和减少重复的校验逻辑。
|
2月前
|
JavaScript 前端开发
在url中取ip或者键值对、手机号脱敏、电话号脱敏、身份证脱敏、银行卡号脱敏、身份证校验
本文提供了JavaScript代码示例,用于从URL中提取IP地址、键值对,以及对手机号、电话号码、身份证号和银行卡号进行脱敏处理,还包含了身份证号的校验方法。
47 0
|
2月前
|
前端开发 C#
C# 一分钟浅谈:字符串操作与正则表达式
本文详细介绍C#中的字符串操作与正则表达式应用,涵盖字符串拼接、分割、查找及替换等基础操作,并通过实例讲解正则表达式的模式匹配、文本替换与分组捕获技巧。同时,文章还探讨了性能优化、复杂度管理和安全性等问题及解决策略,助你提升编程效率,应对实际开发挑战。
67 0