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见附件
相关推荐
梦的天空 2020-08-25
88274956 2020-11-03
Zhongmeishijue 2020-09-10
runner 2020-09-01
IdeaElements 2020-08-19
luvhl 2020-08-17
移动开发与培训 2020-08-16
ReunionIsland 2020-08-16
lyqdanang 2020-08-16
NARUTOLUOLUO 2020-08-03
MyNameIsXiaoLai 2020-07-08
星辰的笔记 2020-07-04
csstpeixun 2020-06-28
letheashura 2020-06-26
liaoxuewu 2020-06-26
OldBowl 2020-06-26
北京老苏 2020-06-25
Luffyying 2020-06-25