正文
JavaScript学习笔记- 正则表达式常用验证
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
<div>
<h1>一、判断中国邮政编码匹配</h1>
<p>分析：中国邮政编码都是6位，且为纯数字</p>
<div>邮政编码：<input id="Postcode" type="text" onblur="checkPost();" /></div>
<div id="Prompt"></div>
</div>
<script type="text/javascript">
function checkPost() {
var Post = document.getElementById("Postcode").value; //获取输入框的值
var Prom = document.getElementById("Prompt"); //获取提示栏
var regPost = /^\d{6}$/; //解释：匹配数字6次，且开头到结尾都为数字
var isPost = regPost.test(Post); //测试 Post 是否符合 regPost 的规则，是则返回true，不是则返回false
if (isPost == false) {
Prom.innerHTML = "请输入正确的邮政编码";
return false;
}
Prom.innerHTML = "";
return true;
}
</script>
<div>
<h1>一、判断中国手机号</h1>
<p>分析：中国手机号都是11位，且为纯数字</p>
<div>手机号：<input id="Mobile" type="text" onblur="checkMobile();" /></div>
<div id="PromptM"></div>
</div>
<script type="text/javascript">
function checkMobile() {
var Mobile = document.getElementById("Mobile").value; //获取输入框的值
var PromM = document.getElementById("PromptM"); //获取提示栏
if (Mobile.length != 11) { //首先判断其必须为11位
PromM.innerHTML = "请输入11位手机号";
return false
}
/**分析：
* 手机号码:
* 13[0-9], 14[5,7], 15[0, 1, 2, 3, 5, 6, 7, 8, 9], 17[0, 1, 6, 7, 8], 18[0-9]
* 移动号段: 134,135,136,137,138,139,147,150,151,152,157,158,159,170,178,182,183,184,187,188
* 联通号段: 130,131,132,145,152,155,156,170,171,176,185,186
* 电信号段: 133,134,153,170,177,180,181,189
分析是在度娘里搜的，随便一搜就出来了很多了，这是2016年最新的
**/ var regMobile = /^1(3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9])\d{8}$/;
/**解释：
* ^1 开头为1
* 3[0-9] 第二位为3，第三位为0-9中的任意数字
* |4[57] 或第二位为4，第三位为5或7
* |5[0-35-9] 或第二位为5，第三位为0-3 5-9中的任意数字
* |7[01678] 或第二位为7，第三位为[...]中的任意数字
* |8[0-9] 或第二位为8，第三位为0-9中的任意数字
* \d{8}$ 后8为纯数字
**/
var isMobile = regMobile.test(Mobile);
if (isMobile == false) {
PromM.innerHTML = "请输入正确的手机号";
return false;
}
PromM.innerHTML = "";
return true;
}
</script>
<div>
<h1>一、判断用户名</h1>
<p>分析：用户名每个平台的规定不一样，这里按“英文字母和数字组成的4-18为字符，以字母开头”为例</p>
<div>用户名：<input id="UseName" type="text" onblur="checkUseN();" /></div>
<div id="PromptU"></div>
</div>
<script type="text/javascript">
function checkUseN() {
var UseN = document.getElementById("UseName").value; //获取输入框的值
var PromU = document.getElementById("PromptU"); //获取提示栏
if (UseN == "") { //判断用户名不为空
PromU.innerHTML = "用户名不能为空"
return false;
}
var regUseN = /^[A-z][A-z0-9]{3,17}$/;
/**解释：
* ^[A-z] 以字母开头
* [A-z0-9] 后面最少4位字母或数字，最多17个，且以此为结尾
**/
var isUseN = regUseN.test(UseN);
if (isUseN == false) {
PromU.innerHTML = "请输入正确的用户名";
return false;
}
PromU.innerHTML = "";
return true;
}
</script>
<div>
<h1>一、判断密码</h1>
<p>分析：密码每个平台的规则也不尽相同，这里按“英文字母+数字+特殊符号的6-20位字符组成”为例</p>
<div>密码：<input id="password" type="password" onblur="checkPW();" /></div>
<div id="PromptPW"></div>
<div>确认密码：<input id="againpw" type="password" onblur="checkApw();" /></div>
<div id="PromptApw"></div> </div>
<script type="text/javascript">
var PW;
function checkPW() {
PW = document.getElementById("password").value; //获取密码输入框的值
var PromPW = document.getElementById("PromptPW"); //获取提示栏
if (PW == "") { //判断密码不为空
PromPW.innerHTML = "密码不能为空"
return false;
}
if (PW.length < 6) { //判断密码长度最少6位
PromPW.innerHTML = "密码最少为6位字符"
return false;
}
if (PW.length > 20) { //判断密码长度最多20位
PromPW.innerHTML = "密码最多只可以20位字符";
return false;
}
var zm = /[A-z]/g //全局查找字母
if (zm.test(PW) == false) {
PromptPW.innerHTML = "密码必须包含至少一位字母"
return false;
}
var NaN = /\d/g //全局查找数字
if (NaN.test(PW) == false) {
PromptPW.innerHTML = "密码必须包含至少一位数字"
return false;
}
var fh = /[^A-z]\D/g //全局查找非数字与除了字母之外的字符
if (fh.test(PW) == false) {
PromptPW.innerHTML = "密码必须包含至少一位字符"
return false;
}
PromptPW.innerHTML = ""
return true;
} function checkApw() {
var Apw = document.getElementById("againpw").value; //获取确认密码输入框值
var PromApw = document.getElementById("PromptApw"); //获取提示栏
if (Apw == "") { //判断确认密码不为空
PromApw.innerHTML = "确认密码不能为空"
return false;
}
if (Apw !== PW) { //判断确认密码值与密码值必须是否一致
PromApw.innerHTML = "两次输入的密码不一致";
return false;
}
PromApw.innerHTML = "";
return true;
}
</script>
<div>
<h1>一、判断电子邮件</h1>
<p>分析：888@qq.com 888@sina.com.cn</p>
<div>E-mail：<input id="email" type="text" onblur="checkEm();" /></div>
<div id="PromptEm"></div>
</div>
<script type="text/javascript">
function checkEm() {
var Em = document.getElementById("email").value; //获取E-mail输入框值
var PromEm = document.getElementById("PromptEm"); //获取提示栏
var regEm = /^[a-zA-Z0-9_-]{1,}@[a-zA-Z0-9_-]{1,}(\.[a-zA-Z]{2,}){1,2}$/;
/**解释
* ^[a-zA-Z0-9_-]{1,} 开头可以是字母、数字或“_-”，且1次以上
* @[a-zA-Z0-9_-]{1,} 接着是“@”，“@”后是可以是字母、数字或“_-”，且字母、数字或“_-”要1次以上
* (\.[a-zA-Z]{2,}) 接着后面应该是“.”，“.”后应为字母，且字母需2次以上
* {1,2} 像上面这种“.”后面是字母的，最少1次 ，最多只能2次
**/
var isEm = regEm.test(Em);
if (isEm == false) {
PromEm.innerHTML = "您输入的E-mail地址不合法"
return false;
}
PromEm.innerHTML = "";
return true;
}
</script>
<div>
<h1>一、判断出生年月日</h1>
<p>分析：1997-05-11 19970511 1997-5-2</p>
<div>出生年月：<input id="Birth" type="text" onblur="checkBth()" /></div>
<div id="PromptBth"></div>
</div>
<script type="text/javascript">
function checkBth() {
var Bth = document.getElementById("Birth").value; //获取出生年月日输入框值
var PromBth = document.getElementById("PromptBth"); //获取提示栏 //首先大体判断下是否为正确的年月日格式
var regBth = /(19\d{2}|200\d{1}|201\d{1})-?(0?[1-9]|1[0-2])-?(0?[1-9]|[1-2]\d|3[0-1])/;
/**解释
* (19\d{2}|200\d{1}|201\d{1}) 匹配年份，
* 目前能有的年份开头仅有19xx也就是/19\d{2}/ || 200x也就是/200\d{1}/ || 201x也就是/201\d{1}/
* -? 可以有-，也可以没有
* 这是为符合大部分人的书写习惯，我们加上这个判断，可以让匹配率更高，用户体验也更好
* (0?[1-9]|1[0-2]) 匹配月份，这里的0?与上面的-?是一样的作用
*(0?[1-9]|[1-2]\d|3[0-1]) 匹配日
**/
var isBth = regBth.test(Bth);
if (isBth == false) {
PromBth.innerHTML = "请输入正确的出生年月";
return false;
} //判断瑞年平年，大小月的年月日格式
var YearR = /(19\d{2}|200\d{1}|201\d{1})/.exec(Bth)[0] / 4; //获取年份除以4，为判断是否为瑞平年
var YearZ = parseInt(YearR); //年份除以4取整，为判断是否为瑞平年
var month = /^(19\d{2}|200\d{1}|201\d{1})-?(0?[1-9]|1[0-2])/.exec(Bth)[0]; //获取年月 if (/2$/.test(month) == true) { //判断月份是否为2月
if (YearR == YearZ) { //判断是否为瑞年
if (/[30-31]$/.test(Bth) == true) { //判断是否有30或31
PromBth.innerHTML = "请输入正确的出生年月";
return false;
}
}
else if (YearR !== YearZ) { //判断是否为平年
if (/(29|30|31)$/.test(Bth) == true) { //判断是否有29或30或31
PromBth.innerHTML = "请输入正确的出生年月";
return false;
}
}
}
if (/(4|6|9|11)$/.test(month) == true) { //判断月份是否为4、6、9或11月
if (/31$/.test(Bth) == true) { //判断是否有31
PromBth.innerHTML = "请输入正确的出生年月";
return false;
}
}
PromBth.innerHTML = "";
return true;
}
</script>
作者：leona
原文链接：http://www.cnblogs.com/leona-d/p/5950280.html
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接
