JavaScriptDay2-简单网页表单验证
Html部分
1 <!-- 2 注册表单 3 1-用户名 text 4 2-密码 password 5 3-确认密码 password 6 4-性别 radio 7 5-爱好 hobby 8 6-籍贯 select-option 9 7-留言 textarea 10 8-提交 重置 submit reset 11 --> 12 <body> 13 <form action="" method="post" onsubmit="return formCheck()"> 14 <p> 15 <label for="username">用户名</label> 16 </p> 17 <p> 18 <input type="text" id="username" onblur="unameCheck()" placeholder="请输入用户名"/> 19 <label id="unaemelabel"></label> 20 </p> 21 <p> 22 <label for="pwd">密码</label> 23 </p> 24 <p> 25 <input type="password" id="pwd" onblur="pwdCheck()"/> 26 <label for="" id="ulabelpwd"></label> 27 </p> 28 <p> 29 <label for="repwd">确认密码</label> 30 </p> 31 <p> 32 <input type="password" id="repwd" onblur="repwdCheck()"/> 33 <label for="" id="labelrepwd"></label> 34 </p> 35 <p> 36 <label for="">性别</label> 37 </p> 38 <p onmouseover="genderCheck()"> 39 <input type="radio" name="gender" id="g1"/>男 40 <!--获取焦点--> 41 <label for="g1"></label> 42 <input type="radio" name="gender" id="g2"/>女 43 <label for="g2" id="genderlabel"></label> 44 </p> 45 <p> 46 <label>爱好</label> 47 </p> 48 <p onmouseover="hobbyCheck()"> 49 <input type="checkbox" name="hobby" id="chi" value="吃"/>吃 50 <input type="checkbox" name="hobby" id="he" value="喝"/>喝 51 <input type="checkbox" name="hobby" id="wan" value="玩"/>玩 52 <label for="" id="hobbylabel"></label> 53 </p> 54 <p>籍贯</p> 55 <p> 56 <select name="" id="jiguan" onblur="jiguanCheck()"> 57 <option value="">--请选择--</option> 58 <option value="jia">家</option> 59 <option value="xue">学</option> 60 <option value="fan">饭</option> 61 </select> 62 <label for="" id="jiguanlabel"></label> 63 </p> 64 <p>留言</p> 65 <p> 66 <textarea name="" id="liuyan" cols="30" rows="10" onblur="textheck()"></textarea> 67 <label for="" id="textlabel"></label> 68 </p> 69 <p> 70 <input type="submit" value="提交"/> 71 <input type="reset" value="重置"/> 72 </p> 73 74 </form> 75 </body>
Css部分
<script>
//用户名验证
function unameCheck(){
//1-获取
var uname = document.getElementById("username").value;
var ulabel = document.getElementById("unaemelabel");
//2-不能为空
if(uname == null || uname == ""){
//给出提示信息
ulabel.innerHTML="对不起";
ulabel.style.color="red";
return false;
}else{
ulabel.innerHTML="<span class='fa fa-heart'></span>";
ulabel.style.color="green";
return true;
}
}
//密码验证
function pwdCheck(){
//1-获取
var upwd = document.getElementById("pwd").value;
var ulabel = document.getElementById("ulabelpwd");
//2-不能为空
if(upwd == null || upwd == ""){
//给出提示信息
ulabel.innerHTML="对不起";
ulabel.style.color="red";
return false;
}else{
ulabel.innerHTML="<span class='fa fa-heart'></span>";
ulabel.style.color="green";
return true;
}
}
//确认密码验证
function repwdCheck(){
//1-获取
var upwd = document.getElementById("pwd").value;
var repwd = document.getElementById("repwd").value;
var labelrepwd = document.getElementById("labelrepwd");
//2-不能为空
if(repwd == null || repwd == ""){
//给出提示信息
labelrepwd.innerHTML="对不起";
labelrepwd.style.color="red";
return false;
}else if(upwd!=repwd){
labelrepwd.innerHTML="不一致";
labelrepwd.style.color="red";
}
else{
labelrepwd.innerHTML="<span class='fa fa-heart'></span>";
labelrepwd.style.color="green";
return true;
}
}
//性别验证
function genderCheck(){
//1-获取 根据全部radio document.getElementsByName
var gendername = document.getElementsByName("gender");
var genderlabel = document.getElementById("genderlabel");
//判断
var rs = false;
for(var i=0; i < gendername.length; i++){
if(gendername[i].checked){
rs = true;
break;
}
}
if(rs){
genderlabel.innerHTML="<span class='fa fa-heart'></span>";
genderlabel.style.color="green";
return true;
}else{
genderlabel.innerHTML="请选择性别";
genderlabel.style.color="red";
}
}
//爱好验证
function hobbyCheck(){
//1-获取 根据全部hobby document.getElementsByName
var hobbyname = document.getElementsByName("hobby");
var hobbylabel = document.getElementById("hobbylabel");
//判断
var count = 0;
for(var i=0; i < hobbyname.length; i++){
if(hobbyname[i].checked){
count++;
}
}
if(count >= 2){
hobbylabel.innerHTML="<span class='fa fa-heart'></span>";
hobbylabel.style.color="green";
return true;
}else if(count == 1){
hobbylabel.innerHTML="至少选两个";
hobbylabel.style.color="red";
} else{
hobbylabel.innerHTML="请选择爱好";
hobbylabel.style.color="red";
}
}
//籍贯验证
//获取
function jiguanCheck(){
var jiguan = document.getElementById("jiguan").value;
var jiguanlabel = document.getElementById("jiguanlabel");
//验证
if(jiguan == "" || jiguan == null){
jiguanlabel.innerHTML="未选择";
jiguanlabel.style.color="red";
return false;
}else{
jiguanlabel.innerHTML="<span class='fa fa-heart'></span>";
jiguanlabel.style.color="green";
return true;
}
}
//文本域验证
function textheck(){
var textname = document.getElementById("liuyan").value;
var textlabel = document.getElementById("textlabel");
//验证
if(textname == "" || jiguan == null){
textlabel.innerHTML="未选择";
textlabel.style.color="red";
return false;
}else{
textlabel.innerHTML="<span class='fa fa-heart'></span>";
textlabel.style.color="green";
return true;
}
}
//表单提交验证
function formCheck(){
var rs1 = unameCheck();
var rs2 = pwdCheck();
var rs3 = repwdCheck()
var rs4 = genderCheck();
var rs5 = hobbyCheck();
var rs6 = jiguanCheck();
var rs7 = textheck();
if(rs1&&rs2&&rs3&&rs4&&rs5&&rs6&&rs7){
return true;
}else{
return false;
}
}
</script>
总结
最初使写的简单验证方法吧，主要结合在每个表单属性中加入鼠标时间，再有JavaScript编写 验证 更改等信息。
具体是利用document.getElementById（）或者document.getElementsByName（）获得表单属性中值，随后对属性值进行非空判断（但是例如单选框radio，多选框checkbox是利用获得属性者的大小在由chenk属性判断是否以点击）。
