【校驗標準】
名字：1-4位
密碼：1-4位
確認密碼
選擇性別（必選）
選擇愛好（選3以上）
簡介（140字以內）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>驗證表單</title>
<style>
td.ex{
color: #959A9B
}
</style>
</head>
<body>
<center>
<form action="http://qduyb.top" method="get" onsubmit="return checkAll()">
<table>
<caption>用戶註冊表</caption>
<tr>
<td>用戶姓名：</td>
<td><input type="text" onblur="checkName(this)" id="name"></td>
<td><label id="name_msg"></label></td>
<td class="ex">4~8位</td>
</tr>
<tr>
<td>用戶密碼：</td>
<td><input type="password" onblur="checkPass(this)" id="pass"></td>
<td><label id="pass_msg"></label></td>
<td class="ex">4~8位</td>
</tr>
<tr>
<td>重複密碼：</td>
<td><input type="password" onblur="recheckPass(this)" id="repass"></td>
<td><label id="repass_msg"></label></td>
<td class="ex">和密碼一致</td>
</tr>
<tr>
<td>性別：</td>
<td>
<input type="radio" name="sex" value="0" onclick="checkSex()">男
<input type="radio" name="sex" value="0" onclick="checkSex()">女
</td>
<td><label id="sex_msg"></label></td>
<td class="ex">請勿爲空</td>
</tr>
<tr>
<td>愛好：</td>
<td>
<input type="checkbox" name="hobby" value="soccer" onclick="checkHobby()"/>足球
<input type="checkbox" name="hobby" value="game" onclick="checkHobby()"/>遊戲
<input type="checkbox" name="hobby" value="travel" onclick="checkHobby()"/>旅行
<input type="checkbox" name="hobby" value="run" onclick="checkHobby()"/>跑步
<input type="checkbox" name="hobby" value="sleep" onclick="checkHobby()"/>睡覺
</td>
<td>
<label id="hobby_msg"></label>
</td>
<td class="ex">不能少於三個</td>
</tr>
<tr>
<td>簡介：</td>
<td>
<textarea name="weibo" id="" cols="40" rows="5" onkeyup="check(this.value)"
oncopy="return false" oncut="return false" onpaste="return false"></textarea></td>
<td>
<div id="msg"></div>
</td>
<td class="ex">不能多於140個字</td>
</tr>
<tr>
<td ><input type="submit" value="提交"></td>
<td ><input type="reset" value="取消"></td>
<td></td><td></td>
</tr>
</table>
</form>
</center>
<script>
var flagName = false
var flagPass = false
var flagRepass = false
var flagSex = false
var flagHobby = false
var flagText = false
function checkName(flag) {
var dom_lb = document.getElementById('name_msg')
if (flag.value.length<4||flag.value.length>8) {
dom_lb.innerHTML="<font color='red'>用戶姓名長度小四大八位</font>"
flagName=false
return
}
flagName=true
dom_lb.innerHTML="<font color='green'>用戶姓名符合要求</font>"
}
function checkPass(flag) {
var dom_lb = document.getElementById('pass_msg')
if (flag.value.length<4||flag.value.length>8) {
dom_lb.innerHTML="<font color='red'>用戶密碼長度小四大八位</font>"
flagPass=false
return
}
flagPass=true
dom_lb.innerHTML="<font color='green'>用戶密碼符合要求</font>"
}
function recheckPass() {
var dom_lb = document.getElementById('repass_msg')
var dom_llb = document.getElementById('sex_msg')
var pass = document.getElementById('pass').value;
var repass = document.getElementById('repass').value;
if (pass != repass) {
dom_lb.innerHTML="<font color='red'>兩次密碼不一致</font>"
flagRepass=false
return
}
flagRepass=true
dom_lb.innerHTML="<font color='green'>兩次密碼一致</font>"
dom_llb.innerHTML="<img src='image/wrong.png'><font color='red'>請選擇性別</font>"
}
function checkSex() {
var count = 0
var dom_lb = document.getElementById('sex_msg')
var dom_sex = document.getElementsByName("sex")
for (var i = 0; i < dom_sex.length; i++) {
if (dom_sex[i].checked) {
count++;
}
}
if (count>0) {
flagSex = true;
dom_lb.innerHTML="<img src='image/right.png'>"
}
}
function checkHobby() {
var count = 0;
var dom_hobby = document.getElementsByName("hobby")
var dom_lb = document.getElementById("hobby_msg")
for (var i = 0; i < dom_hobby.length; i++) {
if(dom_hobby[i].checked){
count++
}
if (count<3) {
dom_lb.innerHTML="<font color='red'>愛好不能小於3個</font>"
flagHobby=false
}
else {
dom_lb.innerHTML="<font color='green'>愛好符合要求</font>"
flagHobby=true;
}
}
}
function check(value) {
var dom_div = document.getElementById('msg')
if (value.length<=140 && value.length>0) {
dom_div.innerHTML="<font color='green'>您還可以輸入"+(140-value.length)+"個字符</font>"
flagText=true;
return
}
dom_div.innerHTML="<font color='red'>您已經超過"+(value.length-140)+"個字符</font>"
flagText=false;
}
function checkAll() {
return flagName && flagPass && flagRepass && flagSex && flagHobby && flagText
}
</script>
</body>
</html>
希望能幫助剛學表單校驗的朋友一點提示，有不懂的地方接着問