本文整理了前端开发中常用的八个JavaScript正则表达式，涵盖手机号、密码、用户名、邮箱、身份证号、日期、QQ/微信号及座机号的验证规则。同时附带发送验证码的倒计时功能实现代码，帮助开发者快速完成表单校验逻辑，提升开发效率。
常用JS正则表达式汇总
在前端开发过程中，处理表单输入框时经常需要用到正则表达式进行数据校验。为此，本文总结了一系列常见且实用的正则表达式书写技巧，旨在为开发者提供便利。
相关界面效果如下图所示：
手机号与密码验证详解
一、手机号码验证
$(document).ready(function(){
//判断输入手机号码是否正确
$("#telephone").focus(function(){
document.getElementById("ph-hint").innerHTML = ":open_mouth:请输入11位手机号码";
})
$("#telephone").blur(function(){
if(/^((13[0-9])|(15[^4,\D])|(18[0-9]))\d{8}$/.test(this.value)){
document.getElementById("ph-hint").innerHTML = "";
}else if(document.getElementById("telephone").value == ""){
document.getElementById("ph-hint").innerHTML = " 咦，手机号不能为空哦";
}else{
document.getElementById("ph-hint").innerHTML = " 这好像不是一个手机号码哦";
document.getElementById("telephone").value = "";
}
})
})详解：当获取焦点时，提示文字请输入手机号，然后失去焦点时判断，那段正则表达式表示的是13几，这个几0-9都可以，或者15几，但是非4的都行，或者18几，0-9都可以，然后再加8位数字，符合条件则成功，否则根据情况判断提示文字；
二、密码格式验证
$(document).ready(function(){
//判断输入密码格式是否正确
$("#setpassword").focus(function(){
document.getElementById("pw-hint").innerHTML = ":open_mouth:请您输入密码，6-15个字母数字和符号两种以上组合";
})
$("#setpassword").blur(function(){
if(/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?![,\.#%'\+\*\-:;^_`]+$)[,\.#%'\+\*\-:;^_`0-9A-Za-z]{6,15}$/.test(this.value)){
document.getElementById("pw-hint").innerHTML = "";
}else if(document.getElementById("setpassword").value == ""){
document.getElementById("pw-hint").innerHTML = " 咦，密码不能为空哦";
}else{
document.getElementById("pw-hint").innerHTML = " 你的密码格式有误,请重新输入";
document.getElementById("setpassword").value = "";
}
})
})具体逻辑如下：获取焦点时提示“请输入密码”；失去焦点时进行校验。该正则表达式允许输入0-9的数字、a-z及A-Z的大小写字母，并包含部分特殊符号。密码长度限制在6到15位之间，符合规则则验证通过，否则显示错误提示。
以下其他格式的介绍将简化描述，具体实现可参考上述两段详细逻辑。
其他常见格式验证规则
三、用户名验证
//用户名正则，4到16位（字母，数字，下划线，减号）
var username = /^[a-zA-Z0-9_-]{4,16}$/;
//文字
var username=/[\d]/g；四、电子邮箱验证
//对电子邮件的验证
var email = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;五、身份证号验证
//身份证号（18位）正则
var cP = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;六、日期格式验证
//日期正则，简单判定,未做月份及日期的判定
var time = /^\d{4}(\-)\d{1,2}\1\d{1,2}$/;
//日期正则，复杂判定
var time = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;七、QQ号与微信号验证
//QQ号正则，5至11位
var qq = /^[1-9][0-9]{4,10}$/;
//微信号正则，6至20位，以字母开头，字母，数字，减号，下划线
var wx = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;八、座机号码验证
//座机号
var tel =/(^0\d{2}-8\d{7}$)|(^0\d{3}-3\d{6}$)/;验证码倒计时功能实现
附加功能：发送验证码的倒计时逻辑实现
<input class="login-code-send" id="login-code-send" type="button" name="sendcode" value="发送验证码" onclick="settime(this);"/>
//登录，忘记密码的验证码
var counts = 60;
function settime(val) {
if (counts == 0) {
val.removeAttribute("disabled");
val.value = "获取验证码";
counts = 60;
return false;
} else {
val.setAttribute("disabled", true);
val.value = "重新发送("+counts+")";
counts--;
}
setTimeout(function () {
settime(val);
}, 1000);
}总结
以上介绍了八个常用的JavaScript正则表达式，希望能为各位开发者提供帮助。如有任何疑问，欢迎留言交流，小编将及时回复。感谢大家对本网站的支持！