正则表达式验证示例

最新推荐文章于 2025-08-21 08:29:25 发布

TalonChen

最新推荐文章于 2025-08-21 08:29:25 发布

阅读量377

点赞数

CC 4.0 BY-SA版权

文章标签：正则表达式 function class email xhtml input

本文链接：https://blog.youkuaiyun.com/hay24/article/details/7923256

本文介绍了一个包含多种输入验证功能的表单脚本，包括用户名、密码、身份证号、电子邮箱等字段的验证逻辑。通过JavaScript实现了即时反馈，帮助用户确保输入数据的有效性和准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
	span.errMsg{
		color:#FF0000;
	}
</style>

<script type="text/jscript">

// 验证用户名 正则表达式为)：^[\u4E00-\u9FA5]{2,5}$   
function checkUsername(){
	var username = document.getElementById("username");
	var usernameRegexp = new RegExp("^[\u4E00-\u9FA5]{2,5}$");
	if(usernameRegexp.test(username.value)){
		document.getElementById("usernameMsg").innerHTML = "";
	}else{
		document.getElementById("usernameMsg").innerHTML = "用户名必须为2-5个中文汉字";
		
	}
}

// 验证密码
function checkPwdLength(){
	var pwd = document.getElementById("pwd");
	if(pwd.value.length < 6){
		document.getElementById("pwdMsg").innerHTML = "密码长度不能小于6位";
	}else{
		document.getElementById("pwdMsg").innerHTML = "";
	}
}

function checkPwd(){
	var pwd = document.getElementById("pwd");
	var pwd2 = document.getElementById("pwd2");
	
	if(pwd.value == pwd2.value){
		document.getElementById("pwd2Msg").innerHTML = "";
	}else{
		document.getElementById("pwd2Msg").innerHTML = "密码不一致";
		
	}
}

// 身份证 
function checkS18(){
	var s18 = document.getElementById("s18");
	var s18Regexp = new RegExp(/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/);
	if(s18Regexp.test(s18.value)){
		document.getElementById("s18Msg").innerHTML = "";
		
		// 成功的场合
		document.getElementById("yyyy").value = s18.value.substr(6,4);
		document.getElementById("mm").value = s18.value.substr(10,2);
		document.getElementById("dd").value = s18.value.substr(12,2);
		
	}else{
		document.getElementById("s18Msg").innerHTML = "身份证必须是18位";
		
		document.getElementById("yyyy").value = "";
		document.getElementById("mm").value = "";
		document.getElementById("dd").value = "";
	}
}

// 邮箱验证 w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
function checkEmail(){
	var email = document.getElementById("email");
	var emailRegexp = new RegExp( /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/);
	if(emailRegexp.test(email.value)){
		document.getElementById("emailMsg").innerHTML = "";
	}else{
		document.getElementById("emailMsg").innerHTML = "邮箱格式不正确";
	}

}
</script>
</head>

<body>

<table border="1" cellpadding="1" cellspacing="1">
<caption style="font-size:24px;" >注册页面</caption>
<tr>
    <td>用户名：</td>
    <td><input type="text" id="username" onblur="checkUsername()"  /></td>
    <td> <span id="usernameMsg" class="errMsg"></span></td>
</tr>
<tr>
    <td>密码：</td>
    <td><input type="text" id="pwd" onblur="checkPwdLength()"  /></td>
    <td> <span id="pwdMsg" class="errMsg"/></td>
</tr>
<tr>
    <td>确认密码：</td>
    <td><input type="text" id="pwd2" onblur="checkPwd()"/></td>
    <td> <span id="pwd2Msg" class="errMsg"/></td>
</tr>
<tr>
    <td>身份证：</td>
    <td><input type="text" id="s18" onblur="checkS18()"/></td>
    <td> <span id="s18Msg" class="errMsg"/></td>
</tr>

<tr>
    <td>年月日：</td>
    <td><input type="text" id="yyyy" readonly="readonly" />年
    <input type="text" id="mm" readonly="readonly" />月
    <input type="text" id="dd" readonly="readonly" />日</td>
</tr>

<tr>
    <td>邮箱：</td>
    <td><input type="text" id="email" onblur="checkEmail()" /></td>
    <td> <span id="emailMsg" class="errMsg"/></td>
</tr>

<tr>
    <td colspan="3" align="center"><input type="button" value="注册"/></td>
</tr>
</table>

</body>
</html>