JavaScript表单验证——正则表达式验证邮箱和实现密码强度

<!DOCTYPE html>
<html>

	<head>
		<title>改善用户体验的表单</title>
		<style>
			#pwdLvSpan {
				display: inline-block;
				width: 100px;
				height: 5px;
				background: #c3c3c3;
			}
			
			#pwdLvSpan i {
				display: block;
				background: green;
				height: 5px;
				width: 0;
			}
		</style>
	</head>

	<body>
		<form method="POST" onSubmit="return eg.regCheck();">
			<input type="hidden" name="" id="errnum" value="0" /> 账户：
			<input type="text" name="" id="userid" /><br /><br /> 密码：
			<input type="password" name="" id="userpwd" /> 密码强度 <span id="pwdLvSpan"><i id="pwdLv"></i></span><br /><br /> 邮箱：
			<input type="text" name="" id="email" /><br /><br />
			<input type="submit" value="注册" id="regBtn" /> <input type="button" value="解锁" onclick="eg.unlock()" style="display:none;" id="regUnlock" />
		</form>
		<script>
			var eg = {}; //声明一个对象，当做命名空间来使用，本书默认的范例都会以此来方便管理
			//定义一个公共函数来获取指定id元素，减少代码量，提高代码复用率
			eg.$ = function(id) {
				return document.getElementById(id);
			};
			//定义一个公共函数来解决事件监听的兼容问题
			eg.addListener = function(target, type, handler) {
				if(target.addEventListener) {
					target.addEventListener(type, handler, false);
				} else if(target.attachEvent) {
					target.attachEvent("on" + type, handler);
				} else {
					target["on" + type] = handler;
				}
			};
			//主要的验证方法
			eg.regCheck = function() {
				//邮箱验证
				var email = eg.$("email");
				//if(!new RegExp("^[a-z\\d]+[\\w\\-\.]*@([a-z\\d]+[a-z\\d\\-]*\.)+[a-z]{2,4}$","i").test(email.value)){
				if(!/^[A-Za-z\d]+[A-Za-z\d\-_\.]*@([A-Za-z\d]+[A-Za-z\d\-]*\.)+[A-Za-z]{2,4}$/.test(email.value)) {
					alert('请输入正确的邮箱!');
					email.focus();
					eg.err();
					return false;
				}
				return true;
			};
			//添加一些交互事件
			eg.addEvent = function() {
				var pwd = eg.$("userpwd");
				eg.addListener(pwd, "keyup", function() {
					var lv = 0;
					if(/^\d{4,}$/.test(pwd.value)) {
						lv = 10;
					} else if(/^\w{4,}$/.test(pwd.value)) {
						lv = 25;
					} else if(/^[\d\w]{4,}$/.test(pwd.value)) {
						lv = 50;
					} else if(/^[\d\w~!@#$%\^&*\(\)\-{}\[\]=<>,\.\?\/]{4,}$/.test(pwd.value)) {
						lv = 100;
					} else if(pwd.value.length < 6 && pwd.value.length > 3) {
						lv = 60;
					} else if(pwd.value.length < 4) {
						lv = 0;
					}
					eg.$("pwdLv").style.width = lv + "px";
				});
			}
			//在用户单击注册按钮前就要运行起来,所以定义好就立刻调用
			eg.addEvent();
		</script>
	</body>

</html>
JavaScript表单验证——正则表达式验证邮箱和实现密码强度

猜你喜欢
