表单的用户体验改善
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<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="password" name="" id="userpwd2"/><br /><br />
性别:<input type="radio"name="sex" value="1" checked="checked"/>
男 <input type="radio" name="sex" value="0"/> 女 <br /><br />
年龄:<select name="" id="age">
<option value="0" select="selected">请选择年龄段</option>
<option value="1" >18岁以下</option>
<option value="2" >18-24岁</option>
<option value="3" >24-30岁</option>
<option value="4" >30-35岁</option>
<option value="5" >35岁以上</option>
</select><br /><br />
爱好:<input type="checkbox" name="like" value="1" cass="like"/>
上网:<input type="checkbox" name="like" value="2" cass="like"/>
逛街:<input type="checkbox" name="like" value="3" cass="like"/>
看电影:<input type="checkbox" name="like" value="4" cass="like"/>
其他<br/><br/>
简介:<textarea name="" rows="4" cols="18" id="about"></textarea><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.getElementsByClassName=function(className,element){
if(document.getElementsByClassName){
return (element||document).getElementsByClassName(className)
}
var children=(element||document).getElementsByTagName('*');
var elements=new Array();
for(var i=0;i<children.length;i++){
var child=children[i];
var classNames =child.className.split(' ');
for(var j=0;j<classNames.length;j++){
if(classNames[j]==className){
elements.push(child);
break;
}
}
}
return elements;
};
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 uid=eg.$("userid");
var upwd=eg.$("userpwd");
var upwd2=eg.$("userpwd2");
if(uid.value==''){
alert('账号不能为空!');
uid.focus();
eg.err();
return false;
}
if(upwd.value==''){
alert('密码不能为空!');
upwd.focus();
eg.err();
return false;
}
if(upwd.value!=upwd2.value){
alert('两次密码输入不同!');
upwd.focus();
eg.err();
return false;
}
var about=eg.$("about");
if(about.value.length>60){
alert('简介太长!');
about.focus();
eg.err();
return false;
}
var age=eg.$("age"); //下拉选项框
if(age.value=="0"){
alert('请选择年龄段!');
age.focus();
eg.err();
return false;
}
var likes=document.getElementsByClassName("like");
var likeNum=0;
for(var n=0;n<likes.length;n++){
if(likes[n].checked){
likeNum++;
}
}
if(likeNum==0){
alert('请至少选择一个爱好！');
eg.err();
return false;
}
//邮箱验证
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; //返回true就会提交表单form
};
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();
//出错是记录次数
eg.err=function(){
var el=eg.$("errnum");
var old=el.value;
el.value=parseInt(old)+1;
eg.lock();
};
eg.lock=function () {
var err=eg.$("errnum");
if(parseInt(err.value)>2){
eg.$("regBtn").disabled=true;
//根据业务需求，输错三次就锁定
eg.$("regUnlock").style.display="block";
//同时显示解锁按钮
}
};
//解锁
eg.unlock=function(){
eg.$("regBtn").disabled=false;
//根据业务需求，解锁就是让用户可以重新注册
eg.$("regUnlock").style.display="none";
//元素所有样式都挂载到style属性下
}
</script>
</body>
</html>
1911
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
