```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="reg">
<h2><img src="img/close.png" alt="关闭" class="close" />会员注册</h2>
<form id="form" action="#" name="reg">
<dl>
<dd>用 户 名：<input id="uname" type="text" name="user" class="text" />
<span id="info_user" class="info info_user">请输入用户名，2~20位，由字母、数字和下划线组成</span>
<span id="error_user" class="error error_user">输入不合法，请重新输入!</span>
<span id="succ_user" class="succ succ_user">可用</span>
<span id="loading" class="loading">正在检测用户名...</span>
</dd>
<dd>密 码：<input id="pwd" type="password" name="pass" class="text" />
<span id="info_pass" class="info info_pass">
<p>安全级别：<strong id="s1" class="s s1">■</strong> <strong id="s2" class="s s2">■</strong> <strong
id="s3" class="s s3">■</strong> <strong id="s4" class="s s4"
style="font-weight: normal;"></strong></p>
<p><strong id="q1" style="font-weight: normal;">○</strong> 6-20个字符</p>
<p><strong id="q2" style="font-weight: normal;">○</strong> 只能包含大小写字母、数字和非空格字符</p>
<p><strong id="q3" style="font-weight: normal;">○</strong> 大、小写字母、数字、非空字符，2种以上</p>
</span>
<span id="error_pass" class="error error_pass">输入不合法，请重新输入!</span>
<span id="succ_pass" class="succ succ_pass">可用</span>
</dd>
<dd>密码确认：<input type="password" name="notpass" class="text" id="pwd2" />
<span id="info_notpass" class="info info_notpass">请再一次输入密码！</span>
<span id="error_notpass" class="error error_notpass">密码不一致，请重新输入!</span>
<span id="succ_notpass" class="succ succ_notpass">可用</span>
</dd>
<dd>提 问：
<select name="ques">
<option value="0">----请选择----</option>
<option value="1">--您最喜欢吃的菜</option>
<option value="2">--您的狗狗的名字</option>
<option value="3">--您的出生地</option>
<option value="4">--您最喜欢的明星</option>
</select>
<span class="error error_ques">尚未选择提问，请选择!</span>
</dd>
<dd>回 答：<input type="text" name="ans" class="text" />
<span class="info info_ans">请输入回答，2~32位！</span>
<span class="error error_ans">回答不合法，请重新输入!</span>
<span class="succ succ_ans">可用</span>
</dd>
<dd>电子邮件：<input id="email" type="text" name="email" class="text" autocomplete="off" />
<span id="info_email" class="info info_email">请输入电子邮箱！</span>
<span id="error_email" class="error error_email">邮箱不合法，请重新输入!</span>
<span id="succ_email" class="succ succ_email">可用</span>
<ul id="all_email" class="all_email">
<li><span class="emailText"></span>@qq.com</li>
<li><span class="emailText"></span>@163.com</li>
<li><span class="emailText"></span>@souhu.com</li>
<li><span class="emailText"></span>@sina.com.cn</li>
<li><span class="emailText"></span>@gmail.com</li>
<li><span class="emailText"></span>@yahoo.com.cn</li>
<li><span class="emailText"></span>@yeah.net</li>
</ul>
</dd>
<dd class="birthday">生 日：
<select id="year" name="year">
<option value="0">-年-</option>
</select>-
<select id="month" name="month">
<option value="0">-月-</option>
</select>-
<select id="day" name="day">
<option value="0">-日-</option>
</select>
<span class="error error_birthday">尚未全部选择，请选择!</span>
</dd>
<dd style="height: 105px;"><span style="vertical-align: 85px;">备 注：</span><textarea
id="tarea" name="ps"></textarea></dd>
<dd id="okNum" style=" display: block;" class="ps">还能输入<strong id="num" class="num">200</strong>字</dd>
<dd id="errNum" style=" display: none;" class="ps">已超过<strong id="moreNum" class="num"></strong>字，<span
id="clear" class="clear">清尾</span></dd>
<dd style="padding: 0 0 0 65px;"><input id="sub" type="submit" name="sub" class="submit" value="" />
</dd>
</dl>
</form>
</div>
</body>
</html>
```
* 1.用户名验证
* uname获取焦点时规则提示
* 失去焦点时，如果不符合验证要求，提示不合法信息
* 符合要求提示成功信息
* 2.密码验证
* 3.密码强度验证
* 4.邮箱验证
* 5.年月日三级联动
* 6.备注实现
* 当点击提交按钮，表单验证只要有一个未通过验证，无法提交
```javascript
<script type="text/javascript">
var form = $id("form");
var sub = $id("sub");
var uname = $id("uname");
var info_user = $id("info_user");
var error_user = $id("error_user");
var succ_user = $id("succ_user");
var loading = $id("loading");
//表单提交
var nameFlag = false;
var pwdFlag = false;
var emailFlag = false;
form.onsubmit = function () {
if (nameFlag == true && pswFlag == true && emailFlag == true) {
return true;
} else {
// alert("验证未通过");
return false;
}
}
//用户名验证
uname.onfocus = function () {
succ_user.style.display = "none";
error_user.style.display = "none";
info_user.style.display = "block";
}
uname.onblur = function () {
var reg = /^\w{2,20}$/;
info_user.style.display = "none";
if (reg.test(uname.value)) {
succ_user.style.display = "block";
nameFlag = true;
} else {
error_user.style.display = "block";
nameFlag = false;
}
}
//密码验证
var pwd = $id("pwd");
var info_pass = $id("info_pass");
var error_pass = $id("error_pass");
var succ_pass = $id("succ_pass");
pwd.onfocus = function () {
succ_pass.style.display = "none";
error_pass.style.display = "none";
info_pass.style.display = "block";
}
pwd.onblur = function () {
var reg = /^\S{6,20}$/;
info_pass.style.display = "none";
if (reg.test(pwd.value)) {
succ_pass.style.display = "block";
nameFlag = true;
} else {
error_pass.style.display = "block";
pwdFlag = false;
}
}
//密码强度验证；
var s1 = $id("s1");
var s2 = $id("s2");
var s3 = $id("s3");
var s4 = $id("s4");
var q1 = $id("q1");
var q2 = $id("q2");
var q3 = $id("q3");
pwd.onkeyup = function () {
if (pwd.value.length <= 20 && pwd.value.length >= 6) {
q1.innerHTML = "●";
} else {
q1.innerHTML = "○";
}
if (/^\S+$/.test(pwd.value)) {
q2.innerHTML = "●";
} else {
q2.innerHTML = "○";
}
// 字母/[a-zA-Z]/ 数字/\d/ 非空符号/[^0-9a-zA-Z ]/
if ((pwd.value.search(/\d/) != -1 && pwd.value.search(/[^0-9a-zA-Z ]/) != -1) || (pwd.value.search(/[^0-9a-zA-Z ]/) != -1 && pwd.value.search(/[a-zA-Z]/) != -1) || (pwd.value.search(/\d/) != -1 && pwd.value.search(/[a-zA-Z]/) != -1)) {
q3.innerHTML = "●";
} else {
q3.innerHTML = "○";
}
if (pwd.value.length < 6) {
s4.innerHTML = "";
}
if (pwd.value.length >= 6) {
s1.style.color = "black";
s4.innerHTML = " 初级";
} else {
s1.style.color = "#ccc";
}
if (pwd.value.length >= 10) {
s2.style.color = "black";
s4.innerHTML = " 中级";
} else {
s2.style.color = "#ccc";
}
if (pwd.value.length >= 15) {
s3.style.color = "black";
s4.innerHTML = " 高级";
} else {
s3.style.color = "#ccc";
}
}
//密码确认
var pwd2 = $id("pwd2");
var info_notpass = $id("info_notpass");
var error_notpass = $id("error_notpass");
var succ_notpass = $id("succ_notpass");
pwd2.onfocus = function () {
succ_notpass.style.display = "none";
error_notpass.style.display = "none";
info_notpass.style.display = "block";
}
pwd2.onblur = function () {
info_notpass.style.display = "none";
if (pwd2.value == pwd.value) {
succ_notpass.style.display = "block";
pwdFlag = true;
} else {
error_notpass.style.display = "block";
pwdFlag = false;
}
}
//邮箱
var email = $id("email");
var info_email = $id("info_email");
var error_email = $id("error_email");
var succ_email = $id("succ_email");
var all_email = $id("all_email");
var all_email_li = all_email.children;
var emailText = document.getElementsByClassName("emailText");
var index = -1;
//邮箱补全
email.onkeyup = function (eve) {
var e = eve || event;
var code = e.keyCode || e.which || e.charCode;
all_email.style.display = "block";
for (var i = 0; i < emailText.length; i++) {
emailText[i].innerHTML = this.value;
}
for (var i = 0; i < all_email_li.length; i++) {
all_email_li[i].style.background = "white";
}
if (code === 13) {
email.value = all_email_li[index].innerText;
document.onclick();
email.onblur();
}
if (code === 38) {
index--;
if (index == -1) {
index = 6;
}
all_email_li[index].style.background = "#ccc";
}
if (code === 40) {
index++;
if (index == 7) {
index = 0;
}
all_email_li[index].style.background = "#ccc";
}
}
all_email.onmousemove = function (eve) {
var e = eve || event;
var target = e.target || e.srcElement;
for (var i = 0; i < all_email_li.length; i++) {
all_email_li[i].style.background = "white";
}
if (target.nodeName === "LI") {
for (var i = 0; i < all_email_li.length; i++) {
all_email_li[i].style.background = "white";
}
target.style.background = "#ccc";
target.onclick = function () {
email.value = target.innerText;
all_email.style.display = "none";
}
}
}
document.onclick = function () {
all_email.style.display = "none";
}
//邮箱验证
email.onfocus = function () {
succ_email.style.display = "none";
error_email.style.display = "none";
info_email.style.display = "block";
}
email.onblur = function () {
var reg = /^\w{3,20}@[0-9a-zA-Z]{2,6}(\.[a-zA-Z]{2,3}){1,2}$/
info_email.style.display = "none";
if (reg.test(email.value)) {
succ_email.style.display = "block";
emailFlag = true;
} else {
error_email.style.display = "block";
emailFlag = false;
}
}
// 日历
function scjd(p) {//删除p所有子元素节点，剩第一个
for (var i = p.children.length-1; i>0; i--) {
if (p.children.length > 1) {
p.removeChild(p.lastElementChild);
}
}
}
function runnian(num) {//判断闰年
if (num % 4 == 0 && num % 100 != 0 || num % 400 == 0) { return true } else { return false }
};
var year = $id("year");
var month = $id("month");
var day = $id("day");
for (var i = 2020; i > 1900; i--) {
year.innerHTML += '<option value="' + i + '">' + i + '</option>';
}
year.onchange = function () {
scjd(month);
for (var i = 1; i < 13; i++) {
month.innerHTML += '<option value="' + i + '">' + i + '</option>';
}
}
month.onchange = function () {
if (year.value != 0 && month.value != 0) {
if (month.value == 1 || month.value == 3 || month.value == 5 || month.value == 7 || month.value == 8 || month.value == 10 || month.value == 12) {
scjd(day);
for (var i = 1; i < 32; i++) {
day.innerHTML += '<option value="' + i + '">' + i + '</option>';
}
}
if (month.value == 4 || month.value == 6 || month.value == 9 || month.value == 11) {
scjd(day);
for (var i = 1; i < 31; i++) {
day.innerHTML += '<option value="' + i + '">' + i + '</option>';
}
}
if (month.value == 2) {
if (runnian(year.value)) {
scjd(day);
for (var i = 1; i < 30; i++) {
day.innerHTML += '<option value="' + i + '">' + i + '</option>';
}
} else {
scjd(day);
for (var i = 1; i < 29; i++) {
day.innerHTML += '<option value="' + i + '">' + i + '</option>';
}
}
}
}
}
//备注
var tarea = $id("tarea");
var okNum = $id("okNum");
var errNum = $id("errNum");
var num = $id("num");
var moreNum = $id("moreNum");
var clear = $id("clear");
tarea.onkeyup = function () {
if (tarea.value.length <= 200) {
num.innerHTML = 200 - tarea.value.length;
okNum.style.display = "block";
errNum.style.display = "none";
clear.style.display = "none";
}
if (tarea.value.length > 200) {
okNum.style.display = "none";
errNum.style.display = "block";
clear.style.display = "block";
moreNum.innerHTML = tarea.value.length - 200;
}
}
clear.onclick = function () {
tarea.value = tarea.value.substring(0, 200);
tarea.onkeydown();
}
</script>
```
