本文整理了JavaScript中常用的表单数据验证正则表达式,涵盖手机号码、用户名、密码、身份证号、非空判断及IP地址等场景。提供具体的正则代码示例,帮助开发者快速实现前端数据校验功能,提升表单提交的准确性与安全性。
JS表单数据验证常用正则表达式汇总
在前端开发中,常用的数据验证方法主要依赖于正则表达式来实现。
checkUserNameflag=false;
checkPasswordflag=false;
checkPasswordAgianflag=false;
checkEmailflag=false;
// 用户名校验
function checkUserName() {
var username = $("userNeme").value;
var zz = /^[A-Za-z0-9]{6,}$/;
if (!zz.test(username)) {
$("userName_warn").innerHTML = " × 用户名不符合规范";
checkUserNameflag=false;
} else {
/*$("userName_warn").style.color='blue';
$("userName_warn").innerHTML = "√ 用户名可用";*/
showUserExist(username);
checkUserNameflag=true;
}
}
//重置提示
function resetWarn(){
$("userName_warn").innerHTML="";
$("email_warn").innerHTML="";
$("password_warn").innerHTML="";
$("Repassword_warn").innerHTML="";
}
// 密码校验
function checkPassword() {
var password1 = $("password").value;
if (password1.length >= 6 && password1.length <= 15) {
checkPasswordflag = true;
$("password_warn").style.color='blue';
$("password_warn").innerHTML = " √ 密码可用 ";
checkAgianMiMa();
} else {
checkPasswordflag = false;
$("password_warn").innerHTML = " × 密码至少为 6 个字符 ";
}
}
function checkPasswordAgian() {
var password1 = $("password").value;
var password2 = $("rePassword").value;
if (password1 == password2) {
if (password1 == "") {
$("Repassword_warn").innerHTML = " × 请输入密码 ";
checkPasswordAgianflag = false;
return;
}
$("Repassword_warn").style.color='blue';
$("Repassword_warn").innerHTML = "√ 重复输入密码正确";
checkPasswordAgianflag = true;
} else {
checkPasswordAgianflag = false;
$("Repassword_warn").innerHTML = " × 两次密码输入不同 ";
}
}
function checkEmail(){
//对电子邮件的验证
var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
var email=$("email").value;
if(!myreg.test(email)){
checkEmailflag=false;
$("email_warn").style.color='red';
$("email_warn").innerHTML = " × 邮箱格式不符合规范";
} else {
checkEmailflag=true;
$("email_warn").style.color='blue';
$("email_warn").innerHTML = "√ 邮箱格式正确";
}
}
function submitCheck(){
alert(checkUserNameflag);
if(checkUserNameflag==false || checkPasswordflag==false || checkPasswordflag==false
||checkPasswordAgianflag==false || checkEmailflag==false){
return;
}
}
function $(id){
return document.getElementById(id);
}
接下来介绍几种在JavaScript表单验证中常用的正则表达式规则。
检测手机号码的正则表达式为:/0?(13|14|15|18)[0-9]{9}/,用于匹配常见的手机号格式。
检测用户名的正则表达式为:/^[A-Za-z0-9_\-\u4e00-\u9fa5]+$/,允许包含数字、英文字母、汉字、下划线及中横线。
检测密码的正则表达式为:/^[A-Za-z0-9_-]+$/,限制密码仅由数字、英文字母、下划线和中横线组成。
检测身份证号的正则表达式为:/\d{17}[\d|x]|\d{15}/,用于匹配15位或18位(末位可为x)的身份证号码。
检测非空字符串的正则表达式为:/^\S+$/,确保输入内容不包含空白字符。
检测IP地址的正则表达式为:/((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))/,用于验证IPv4地址格式。
以上所述是小编给大家介绍的JS表单数据验证的正则表达式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对本站网站的支持!