生活随笔
收集整理的這篇文章主要介紹了
使用JavaScript进行表单验证
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在客戶端提交數據時，JavaScript表單驗證能減輕服務器壓力、確保提交數據的準確性與完整性，所以表單驗證是有必要的。
一般地，如果客戶端提交的數據不完整(不準確)，表單驗證會進行彈框提示或者高亮提示標簽。
常見的表單驗證有：
1.非空驗證(例如：用戶名和密碼必填)
2.正則驗證(例如：正確的郵箱格式)
3.其他驗證(例如：兩次輸入的密碼需一致、性別必須單選、愛好必須選擇指定數目)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用JavaScript進行表單驗證
</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('請輸入用戶名！'); 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('請選擇性別！'); return false; }
}
function checkHobby()
{ if(!checkObj.checkHobby('hobby',3)) { alert('請至少選擇3種愛好！'); return false; }
}
</script>
</head>
<body>
<form onsubmit="return checkHobby();">
<table border="1" cellpadding="0" cellspacing="0"> <tr><td>用戶名：
</td>
<td>
<input type="text" placeholder="請輸入用戶名：" id="txtName" />
</td>
</tr><tr>
<td>密碼：
</td>
<td>
<input type="password" placeholder="請輸入密碼：" id="txtPwd" />
</td>
</tr> <tr>
<td>確認密碼：
</td>
<td>
<input type="password" placeholder="請再次輸入密碼：" 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="請輸入合法的郵箱：" id="txtEmail" />
</td>
</tr> <tr>
<td>愛好：
</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>
總結
以上是生活随笔為你收集整理的使用JavaScript进行表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
