```
<!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="關(guān)閉" class="close" />會(huì)員注冊(cè)</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">請(qǐng)輸入用戶名，2~20位，由字母、數(shù)字和下劃線組成</span>
<span id="error_user" class="error error_user">輸入不合法，請(qǐng)重新輸入!</span>
<span id="succ_user" class="succ succ_user">可用</span>
<span id="loading" class="loading">正在檢測(cè)用戶名...</span>
</dd>
<dd>密 碼：<input id="pwd" type="password" name="pass" class="text" />
<span id="info_pass" class="info info_pass">
<p>安全級(jí)別：<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個(gè)字符</p>
<p><strong id="q2" style="font-weight: normal;">○</strong> 只能包含大小寫字母、數(shù)字和非空格字符</p>
<p><strong id="q3" style="font-weight: normal;">○</strong> 大、小寫字母、數(shù)字、非空字符，2種以上</p>
</span>
<span id="error_pass" class="error error_pass">輸入不合法，請(qǐng)重新輸入!</span>
<span id="succ_pass" class="succ succ_pass">可用</span>
</dd>
<dd>密碼確認(rèn)：<input type="password" name="notpass" class="text" id="pwd2" />
<span id="info_notpass" class="info info_notpass">請(qǐng)?jiān)僖淮屋斎朊艽a！</span>
<span id="error_notpass" class="error error_notpass">密碼不一致，請(qǐng)重新輸入!</span>
<span id="succ_notpass" class="succ succ_notpass">可用</span>
</dd>
<dd>提 問：
<select name="ques">
<option value="0">----請(qǐng)選擇----</option>
<option value="1">--您最喜歡吃的菜</option>
<option value="2">--您的狗狗的名字</option>
<option value="3">--您的出生地</option>
<option value="4">--您最喜歡的明星</option>
</select>
<span class="error error_ques">尚未選擇提問，請(qǐng)選擇!</span>
</dd>
<dd>回 答：<input type="text" name="ans" class="text" />
<span class="info info_ans">請(qǐng)輸入回答，2~32位！</span>
<span class="error error_ans">回答不合法，請(qǐng)重新輸入!</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">請(qǐng)輸入電子郵箱！</span>
<span id="error_email" class="error error_email">郵箱不合法，請(qǐng)重新輸入!</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">尚未全部選擇，請(qǐng)選擇!</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.用戶名驗(yàn)證
* uname獲取焦點(diǎn)時(shí)規(guī)則提示
* 失去焦點(diǎn)時(shí)，如果不符合驗(yàn)證要求，提示不合法信息
* 符合要求提示成功信息
* 2.密碼驗(yàn)證
* 3.密碼強(qiáng)度驗(yàn)證
* 4.郵箱驗(yàn)證
* 5.年月日三級(jí)聯(lián)動(dòng)
* 6.備注實(shí)現(xiàn)
* 當(dāng)點(diǎn)擊提交按鈕，表單驗(yàn)證只要有一個(gè)未通過驗(yàn)證，無法提交
```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("驗(yàn)證未通過");
return false;
}
}
//用戶名驗(yàn)證
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;
}
}
//密碼驗(yàn)證
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;
}
}
//密碼強(qiáng)度驗(yàn)證；
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]/? ? 數(shù)字/\d/? 非空符號(hào)/[^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 = " 初級(jí)";
} else {
s1.style.color = "#ccc";
}
if (pwd.value.length >= 10) {
s2.style.color = "black";
s4.innerHTML = " 中級(jí)";
} else {
s2.style.color = "#ccc";
}
if (pwd.value.length >= 15) {
s3.style.color = "black";
s4.innerHTML = " 高級(jí)";
} else {
s3.style.color = "#ccc";
}
}
//密碼確認(rèn)
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;
//郵箱補(bǔ)全
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";
}
//郵箱驗(yàn)證
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所有子元素節(jié)點(diǎn)，剩第一個(gè)
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>
```
