表单验证时常用正则表达式（以“注册信息”为例）

个人在使用时看到网上总结的有很多了，但大多文章表述的都比较抽象，使用时需要自己组合，通常因为懒所以实际在用时习惯直接拿来用，总结的是本人写程序的过程中用的频率比较高的几个实例：

另：这里有一个博主总结的很不错，链接贴上

个人整理的web开发中常用的表单验证的正则表达式JS——Mr_Smile2014 的文章（侵删）

 

/*验证是否同意协议*/
function checkAgree() {
<span style="white-space:pre">	</span>document.MyForm.subm.disabled = !document.MyForm.isAgree.checked;
}

 

/* 验证用户名 */
function checkUsername() {
	var reg = /^\D\w{4,9}$/ig;/* 不能以数字开头，长度在5-10位 */
	var id = "uname";
	return commonInfo(reg, id);
}

 

/* 验证密码 */
function checkPassword() {
	var reg = /^\d{6}$/ig;/* 必须是数字，位数为6位 */
	var id = "upwd";
	return commonInfo(reg, id);
}

 

/* 验证真实姓名 */
function checkTruename() {
	var reg = /^[\u4e00-\u9fa5]{2,4}$/ig;/* 必须是2-4位的汉字 */
	var id = "tname";
	return commonInfo(reg, id);
}

 

/*验证出生日期*/
function checkBirth(){
	var reg=/^(19\d{2})|((200\d)-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1]))|((201[0-6])-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1]))$/ig;
	var id="birthday";
	return commonInfo(reg, id);
}

 

/*验证身份证*/
function checkBirth(){
	var reg=/^[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)$/;
	var id="birthday";
	return commonInfo(reg, id);
}

 

/* 验证电子邮箱 */
function checkEmail() {
<span style="white-space:pre">	</span>/* 字母数字下划线[a0_] + （0-N个".a0_"） + @ + a0_ + （1-2组由2-3个a0_组成的字符，如com.cn或com） */
<span style="white-space:pre">	</span>var reg = /^(\w)+(\.\w)*@(\w)+(\.\w{2,3}){1,2}$/ig;
	var id = "email";
	return commonInfo(reg, id);
}

 

 

 

</pre><pre>

/* 验证手机号 */
function checkPhone() {
	var reg = /^1[35789]\d{9}$/ig;/* 这个比较简单，不说了 */
	var id = "phone";
	return commonInfo(reg, id);
}

 

/* 提取公共的文本类表单项验证 */
function commonInfo(reg, id) {
	var inputText = document.getElementById(id);
	var inputValue = inputText.value;
	var inputAlt = inputText.alt;
	var inputSpan = document.getElementById(id + "Span");

	if (inputValue == null || inputValue.length == 0) {
		inputSpan.innerHTML = inputAlt + "不能为空！";
		inputSpan.style.color = "red";
		inputSpan.style.background="none";
		return false;
	} else {
		if (!reg.test(inputValue)) {
			inputSpan.innerHTML = inputAlt + "格式有误！";
			inputSpan.style.color = "red";
			inputSpan.style.background="none";
			return false;
		} else {
			inputSpan.innerHTML = "√";
			inputSpan.style.color = "white";
			inputSpan.style.background="rgb(50,200,100)";
			inputSpan.style.padding="2px 4px";
			inputSpan.style.borderRadius="15px";
			return true;
		}
	}
}

其中还有check验证码，获取验证码，提交按钮是否可用的判断，两次密码输入一致的判断，跟在后面，但是跟主题无关了，可以跳过；

 

附：其余表单功能补充：

/* 获得验证码 */
function getCode() {
	var code = parseInt(Math.random() * 9000 + 1000);
	var span = document.getElementById("getCode");
	span.innerHTML = code;
	span.style.fontSize = "18px";
	span.style.padding = "3px 6px";
	span.style.color = "red";
	span.style.textDecoration= "line-through";
	span.style.cursor = "pointer";
	span.style.border = "1px #000 solid";
}

/* 校验验证码 */
function checkCode() {
	var code = document.getElementById("getCode").innerHTML;
	var inputCode = document.getElementById("checkcode").value;
	var inputSpan = document.getElementById("codeSpan");
	if (inputCode == null || inputCode.length == 0) {
		inputSpan.innerHTML = "验证码不能为空！";
		inputSpan.style.color = "red";
		return false;
	} else {
		if (inputCode != code) {
			inputSpan.innerHTML = "验证码输入错误！";
			inputSpan.style.color = "red";
			return false;
		} else {
			inputSpan.innerHTML = "OK！";
			inputSpan.style.color = "green";
			return true;
		}
	}
}

/* 验证爱好的选择 */
function checkHobby() {
	var choice = document.getElementsByName("hobby");/* 注意这里只能通过name值获得，因为id是为唯一的 */
	var Hspan = document.getElementById("hobbySpan");
	var count = 0;
	for (var i = 0; i < choice.length; i++) {
		if (choice[i].checked) {
			count++;
		}
	}
	if (count >= 2) {
		Hspan.innerHTML = "OK！";
		Hspan.style.color = "green";
		return true;
	} else {
		Hspan.innerHTML = "至少选择两项！";
		Hspan.style.color = "red";
		return false;
	}
}

/* 验证两次密码是否一致 */
function checkSame() {
	var reg = /^\d{6}$/ig;/* 必须是数字，位数为6位 */
	var inputText = document.getElementById("confirmPassword");
	var inputValue = inputText.value;
	var inputAlt = inputText.alt;
	var inputSpan = document.getElementById("confirmPasswordSpan");
	var first = document.getElementById("eu_password").value;
	if (inputValue == null || inputValue.length == 0) {
		inputSpan.innerHTML = inputAlt + "不能为空！";
		inputSpan.style.color = "red";
		return false;
	} else {
		if (!reg.test(inputValue)) {
			inputSpan.innerHTML = inputAlt + "格式有误！";
			inputSpan.style.color = "red";
			inputSpan.style.background="none";
			return false;
		} else {
			if (first == inputValue) {
				inputSpan.innerHTML = "√";
				inputSpan.style.color = "white";
				inputSpan.style.background="rgb(50,200,100)";
				inputSpan.style.padding="2px 4px";
				inputSpan.style.borderRadius="15px";
				return true;
			} else {
				inputSpan.innerHTML = "两次密码输入不一致";
				inputSpan.style.color = "red";
				inputSpan.style.background="none";
				return false;
			}
		}
	}
}

/* 验证是否可以提交 */
function checkSubmit() {
	return checkCode() && checkUsername() && checkedPassword() && checkSame()
			&& checkedTruename() && checkHobby() && checkedEmail()
			&& checkedPhone();
}

 

 

 

以下为html代码：

<body onload="getCode();">
		<form action="javascript:alert('提交成功！')" method="get" name="MyForm" onsubmit="return checkSubmit();">
		用 户 名：
			<input type="text" name="uname" id="uname" alt="用户名" onblur="checkUsername();"/>
			<span id="unameSpan"></span><br />
		输入密码：
			<input type="password" name="upwd" id="upwd" alt="密码" onblur="checkPassword();"/>
			<span id="upwdSpan"></span><br />
		确认密码：
			<input type="password" name="qrpwd" id="qrpwd" alt="密码" onblur="checkSame();"/>
			<span id="qrpwdSpan"></span><br />
		真实姓名：
			<input type="text" name="tname" id="tname" alt="真实姓名" onblur="checkTruename();"/>
			<span id="tnameSpan"></span><br />
		电子邮箱：
			<input type="text" name="email" id="email" alt="电子邮箱" onblur="checkEmail();"/>
			<span id="emailSpan"></span><br />
		手机号码：
			<input type="text" name="phone" id="phone" alt="手机号" onblur="checkPhone();"/>
			<span id="phoneSpan"></span><br />
		爱好：<br />
			<input type="checkbox" name="hobby" onclick="checkHobby();"/>音乐
			<input type="checkbox" name="hobby" onclick="checkHobby();"/>电影
			<input type="checkbox" name="hobby" onclick="checkHobby();"/>篮球<br />
			<input type="checkbox" name="hobby" onclick="checkHobby();"/>美术
			<input type="checkbox" name="hobby" onclick="checkHobby();"/>唱歌
			<input type="checkbox" name="hobby" onclick="checkHobby();"/>跳舞
			<span id="hobbySpan"></span><br />
			
		验证码：
			<input type="text" name="checkcode" id="checkcode" alt="验证码" size="4" onblur="checkCode();"/>
			<span id="getCode" title="点击更换验证码" onclick="getCode();"></span>
			<span id="codeSpan"></span><br />
		
			<input type="checkbox" name="isAgree" id="isAgree" onclick="checkAgree();"/>是否同意协议<br />

			<input type="submit" name="subm" id="subm" value="提交" disabled="disabled"/>
		</form>
	</body>