JS之正则表达式及简单表单验证

一:正则表达式语法规则

1:[abc]                a,b或者c任何一个

2:[a-zA-Z]           a到z或A到Z任何一个

3:\d                     表示数字[0-9]，即0到9任意一个

4:X{n}                 表示有n个X

5:X{n,}                表示有n个以上X

6:X{n,m}             表示有n到m范围之内个X

7:\D                    表示非数字

8:\s                     表示空白字符（如空格，\t制表符，\n换行符）

9:\S                    表示非空白字符

10:\w                  表示单词字符：[a-zA-Z_0-9]

11:\W                 表示非单词字符

补充中文：[\u4e00-\u9fa5]

二：正则的常用表达(/^$/)

1：用户名只能为字母，长度为6-12位:            [a-zA-Z]{6,12} 
2：密码只能为数字，长度至少为6位:             [0-9]{6,},\\d{6,} 
3：手机号校验:                                                [1][3578]\\d{9}
4：邮箱校验:                                                   [a-zA-Z_ 0-9]{3,}@([a-zA-Z]+|\\d+)\.[a-zA-Z]+)+

三：简单例子

<form action="#" method="get">
	<ul>
		<li>
			<label>用户名:　</label>
			<input type="text" name="username" id="username" required="required" onblur="checkUser()" />
			<span id="message1"></span>
		</li>
		<li>
			<label>密　码:　</label>
			<input type="password" name="password" id="password" required="required" onblur="checkPassword()" />
			<span id="message2"></span>
		</li>
		<li>
			<label>确认密码:</label>
			<input type="password" name="passwordTwo" id="passwordTwo" required="required" onblur="checkPasswordTwo()" />
			<span id="message3"></span>
		</li>
		<li>
			<label>用户类型:</label>
			<select name="userType">
				<option value="0">管理员</option>
				<option value="1">其他</option>
			</select>
		</li>
		<li>
			<label>性别:　　</label>
			<input type="radio" name="sex" value="male" checked="checked" />男
			<input type="radio" name="sex" value="female" />女
		</li>
		<li>
			<label>兴趣爱好:</label>
			<input type="checkbox" name="hobby" value="reading" />阅读
			<input type="checkbox" name="hobby" value="music" />音乐
			<input type="checkbox" name="hobby" value="sport" />运动
		</li>
		<li>
			<label>电子邮件:</label>
			<input type="email" name="email" id="email" value="" onblur="checkEmail()" />
			<span id="message4"></span>
		</li>
		<li>
			<label>自我介绍:</label>
			<textarea name="intro" rows="5" cols="40"></textarea>
		</li>
		<li>
			<input type="submit" id="sub" value="提交" onclick="return checkAll()" />
			<input type="reset" value="重置" onclick="resetTheAll()" />
		</li>
	</ul>
</form>

<script type="text/javascript">
	function checkUser() {
		var user = document.getElementById("username");
		var regs = /^[a-zA-Z0-9\u4e00-\u9fa5_]{6,18}$/;
		var message = document.getElementById("message1")
		if(regs.test(user.value)) {
			message.style.color = "greenyellow";
			message.innerHTML = "✔";
			return true;

		} else {
			message.style.color = "red";
			message.innerHTML = "请输入6-18位中英文用户名！";
			return false;
		}
	}

	function checkPassword() {
		var pass = document.getElementById("password");
		var regs = /^[a-zA-Z0-9_]{6,12}$/;
		var message = document.getElementById("message2")
		if(regs.test(pass.value)) {
			message.style.color = "greenyellow";
			message.innerHTML = "✔";
			return true;
		} else {
			message.style.color = "red";
			message.innerHTML = "请输入6-12位中英文密码！";
			return false;
		}
	}

	function checkPasswordTwo() {
		var pass1 = document.getElementById("password").value;
		var pass2 = document.getElementById("passwordTwo").value;
		var message = document.getElementById("message3")
		if(pass1 == pass2 && pass2 != "") {
			message.style.color = "greenyellow";
			message.innerHTML = "✔";
			return true;
		} else {
			message.style.color = "red";
			message.innerHTML = "密码不一致";
			return false;
		}
	}

	function checkEmail() {
		var reg = /\w+@\w+\.\w+/;
		var email = document.getElementById("email").value;
		var message = document.getElementById("message4");
		if(reg.test(email)) {
			message.style.color = "greenyellow";
			message.innerHTML = "✔";
			return true;
		} else {
			message.style.color = "red";
			message.innerHTML = "邮箱格式错误，必须包含 @ 和 . ";
			return false;
		}
	}
	//提交所有
	function checkAll() {
		if(checkUser() && checkPassword() && checkPasswordTwo() && checkEmail()) {
			return true;
		} else {
			alert("请完善信息")
			return false;
		}
	}
	//重置所有(当点击重新填写时 提交按钮 恢复不可用状态)
	function resetTheAll() {
		//清除提示信息
		var spans = document.getElementsByTagName("span");
		for(var i = 0; i < spans.length; i++) {
			spans[i].innerHTML = "";
		}

	}
</script>