<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post" onsubmit="return eg.regCheck()">
<input type="hidden" id="errnum" value="0" /> 账户:
<input type="text" id="name" /><br /><br /> 密码:
<input type="password" id="pwd_a" /><br /><br /> 确认:
<input type="password" id="pwd_b" /><br /><br /> 性别:
<input type="radio" name="sex" value="1" checked="checked" />男
<input type="radio" name="sex" value="0" />女<br /><br /> 年龄:
<select id="age">
<option value="0" selected="selected">请选择年龄段</option>
<option value="1">18岁以下</option>
<option value="2">18-30岁</option>
<option value="3">30-40岁</option>
<option value="4">40-50岁</option>
<option value="5">50以上</option>
</select><br /><br /> 爱好:
<input type="checkbox" name="like" class="like" value="1" />逛街
<input type="checkbox" name="like" class="like" value="2" />看电影
<input type="checkbox" name="like" class="like" value="3" />运动
<input type="checkbox" name="like" class="like" value="4" />听音乐
<input type="checkbox" name="like" class="like" value="5" />其他<br /><br /> 简介:
<textarea rows="4" cols="18" id="about"></textarea><br /><br />
<input type="submit" id="regBtn" value="注册" />
<input type="button" style="display: none;" id="regUnlock" value="解锁" onclick="eg.unlock()" />
</form>
<script>
//声明一个对象
var eg = {};
//定义一个公共函数获取指定id
eg.$ = function(id) {
return document.getElementById(id);
};
//主要验证方法
eg.regCheck = function() {
var name = eg.$('name');
var pwd_a = eg.$('pwd_a');
var pwd_b = eg.$('pwd_b');
var about = eg.$('about');
var age = eg.$('age');
var likes = document.getElementsByClassName('like');
var likenum = 0;
for(var n = 0; n < likes.length; n++) {
if(likes[n].checked) {
likenum++;
}
}
if(name.value == '') {
alert('账户不能为空');
eg.err(); //记录错误次数
return false;
}
if(pwd_a.value == '') {
alert('密码不能为空');
eg.err();
return false;
}
if(pwd_a.value !== pwd_b.value) {
alert('两次密码不一致');
eg.err();
return false;
}
if(age.value == '0') {
alert('请选择年龄');
eg.err();
return false;
}
if(about.value.length > 10) {
alert('简介字段过长');
eg.err();
return false;
}
if(likenum == 0) {
alert('请选择一个爱好');
eg.err();
return false;
}
return true; //返回true时表单提交
};
//出错时记录错误次数
eg.err = function() {
var errs = eg.$('errnum');
var num = errs.value;
//将字符串转换为整数+1,并保存
errs.value = parseInt(num) + 1;
//判断锁定
eg.lock();
};
//通过次数判断是否锁定
eg.lock = function() {
var errnum = eg.$('errnum');
if(parseInt(errnum.value) > 2) {
//输错3次锁定
eg.$('regBtn').disabled = true;
//显示解锁按钮
eg.$('regUnlock').style.display = 'block';
}
}
//解锁
eg.unlock = function() {
eg.$('regBtn').disabled = false;
eg.$('regUnlock').style.display = 'none';
}
</script>
</body>
</html>
JavaScript表单验证——检验字符长度,错误次数限制锁定注册和解锁
猜你喜欢
转载自blog.csdn.net/Milan__Kundera/article/details/81836459
今日推荐
周排行