生活随笔
收集整理的這篇文章主要介紹了
使用JavaScript进行表单验证
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
在客戶端提交數(shù)據(jù)時(shí)，JavaScript表單驗(yàn)證能減輕服務(wù)器壓力、確保提交數(shù)據(jù)的準(zhǔn)確性與完整性，所以表單驗(yàn)證是有必要的。
一般地，如果客戶端提交的數(shù)據(jù)不完整(不準(zhǔn)確)，表單驗(yàn)證會(huì)進(jìn)行彈框提示或者高亮提示標(biāo)簽。
常見(jiàn)的表單驗(yàn)證有：
1.非空驗(yàn)證(例如：用戶名和密碼必填)
2.正則驗(yàn)證(例如：正確的郵箱格式)
3.其他驗(yàn)證(例如：兩次輸入的密碼需一致、性別必須單選、愛(ài)好必須選擇指定數(shù)目)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用JavaScript進(jìn)行表單驗(yàn)證
</title>
<script>
function Check()
{
this.chekNotNull=function(id) { var obj=document.getElementById(id); if(obj.value!='') { return true; } else { return false; }
}
this.checkEmail=function(id)
{var obj=document.getElementById(id); var reg=/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; if(reg.test(obj.value)) { return true; } else { return false; }
}
this.checkSex=function(name)
{var obj=document.getElementsByName(name); for(var i=0;i<obj.length;i++){ if(obj[i].checked) { return true; } } return false;
}
this.checkHobby=function(name,num)
{ var x=0; var obj=document.getElementsByName(name); for(var i=0;i<obj.length;i++) { if(obj[i].checked) { x++; } } if(x<num) { return false; } else { return true; }
}
this.checkEuqal=function(id1,id2) { var obj1=document.getElementById(id1); var obj2=document.getElementById(id2); if(obj1.value==obj2.value) { return true; } else { return false; } }
}
var checkObj=new Check();
function checkName()
{ if(!checkObj.chekNotNull('txtName')) { alert('請(qǐng)輸入用戶名！'); return false; }
}
function checkPwdEqual()
{ if(!checkObj.checkEuqal('txtPwd','txtRePwd')) { alert('兩次輸入的密碼不一致！'); return false; }
}
function checkEmail()
{ if(!checkObj.checkEmail('txtEmail')) {alert('郵箱格式不正確！'); return false; }
}
function checkSex()
{ if(!checkObj.checkSex('sex')){ alert('請(qǐng)選擇性別！'); return false; }
}
function checkHobby()
{ if(!checkObj.checkHobby('hobby',3)) { alert('請(qǐng)至少選擇3種愛(ài)好！'); return false; }
}
</script>
</head>
<body>
<form onsubmit="return checkHobby();">
<table border="1" cellpadding="0" cellspacing="0"> <tr><td>用戶名：
</td>
<td>
<input type="text" placeholder="請(qǐng)輸入用戶名：" id="txtName" />
</td>
</tr><tr>
<td>密碼：
</td>
<td>
<input type="password" placeholder="請(qǐng)輸入密碼：" id="txtPwd" />
</td>
</tr> <tr>
<td>確認(rèn)密碼：
</td>
<td>
<input type="password" placeholder="請(qǐng)?jiān)俅屋斎朊艽a：" id="txtRePwd" />
</td>
</tr> <tr>
<td>性別：
</td>
<td>
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
</td>
</tr> <tr>
<td>郵箱：
</td>
<td>
<input type="text" placeholder="請(qǐng)輸入合法的郵箱：" id="txtEmail" />
</td>
</tr> <tr>
<td>愛(ài)好：
</td>
<td>
<input type="checkbox" name="hobby"/>籃球
<input type="checkbox" name="hobby"/>羽毛球
<input type="checkbox" name="hobby"/>足球
<input type="checkbox" name="hobby"/>乒乓球
</td>
</tr> <tr>
<td colspan="2" align="center">
<input type="submit"/>
</td>
</tr></table>
</form>
</body></html>
總結(jié)
以上是生活随笔為你收集整理的使用JavaScript进行表单验证的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
