<!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表单验证——正则表达式验证邮箱和实现密码强度
猜你喜欢
转载自blog.csdn.net/Milan__Kundera/article/details/81951387
今日推荐
周排行