核心提示：【校验标准】名字：1-4位密码：1-4位确认密码选择性别(必选)选择爱好(选3以上)简介(140字以内)!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8t...
【校验标准】
名字：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="https://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>
<p id="msg"></p>
</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_p = document.getElementById('msg')
if (value.length<=140 && value.length>0) {
dom_p.innerHTML="<font color='green'>您还可以输入"+(140-value.length)+"个字符</font>"
flagText=true;
return
}
dom_p.innerHTML="<font color='red'>您已经超过"+(value.length-140)+"个字符</font>"
flagText=false;
}
function checkAll() {
return flagName && flagPass && flagRepass && flagSex && flagHobby && flagText
}
</script>
</body>
</html>
希望能帮助刚学表单校验的朋友一点提示，有不懂的地方接着问
