笔记：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML结构</title>
</head>
<body>
<form method="post" action="" onsubmit="return eg.Click();">
<input type="hidden" name="" id="errnum" value="0"/>
账户：<input type="text" name="" id="user"/><br/><br/>
密码：<input type="password" name="" id="pw1" /><br/><br/>
确认：<input type="password" name="" id="pw2"/><br/><br/>
邮箱：<input type="text" name="" id="email"/><br/><br/>
简介：<textarea name="" rows="4" cols="18" id="about"></textarea><br/><br/>
<input type="submit" value="注册" id="regBtn"/>
<input type="button" value="解锁" onclick="eg.unlock()" style="display: none;" id="Unlock"/>
</form>
<script>
var eg={};
eg.$=function (id) {
return document.getElementById(id);
};
//声明一个对象，当做命名空间来使用
//定义一个公认函数来获取指定id元素，减少代码量，提高代码复用率
eg.Click=function () {
var u=eg.$("user");
var p1=eg.$("pw1");
var p2=eg.$("pw2");
if(u.value== ''){
alert('账户不能为空！');
return false;
}
if(p1.value== ''){
alert('密码不能为空！');
return false;
}
if(p2.value!= p1.value){
alert('两次密码输入不相同！');
return false;
}
//新增部分
var about=eg.$("about");
if (about.value.length>20){
alert('简介太长！');
eg.err();
return false;
}
var email=eg.$("email");
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('请输入正确的邮箱！');
eg.err();
return false;
}
return true;
};
//出错时记录错误次数
eg.err=function (){
var el=eg.$("errnum");
var old=el.value;
el.value=parseInt(old)+1;//把字符串转换为整数+1，并保存起来
eg.lock();//检查是否应该锁定
}
//通过次数判断是否要锁定注册
eg.lock=function () {
var err=eg.$("errnum");
if(parseInt(err.value)>3){
eg.$("regBtn").disable=true;//输错3次锁定
eg.$("Unlock").style.display="block";//显示解锁按钮
}
}
//解锁
eg.unlock=function () {
eg.$("regBtn").disable=false;//解锁让用户重新注册
eg.$("Unlock").style.display="none";//元素所有样式都挂载到style属性下
}
</script>
</body>
</html>
当输入简介太长或者密码错误时，会出现下面的解锁按钮：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
