HTML表單(Form)提交檢驗通用javascript函數(shù)
作者：佚名 轉(zhuǎn)貼自：本站原創(chuàng) 點擊數(shù)：136
HTML表單(Form)提交檢驗通用javascript函數(shù)
一直以來為HTML表單提交校驗的問題頭痛，總是在寫重復(fù)的js代碼，所以一直想寫一個通用的JS函數(shù)，總算找了個時間寫了個通用的一段javascript供大家參考。
本JS程序，可以校驗字段是否為空，是否為數(shù)字，判斷字段長度，檢驗Email格式，檢驗是否含有HTML標(biāo)簽等功能
需要的朋友可以把下面的代碼COPY后另存為html，HTML文件里詳細(xì)使用說明。
<html>
<head>
<title>Form提交校驗通用javascript函數(shù)</title>
<META HTTP-EQUIV=Content-Type CONTENT=text/html; charset=gb2312>
<style>
body,td,p,input{font-size:14.8px;font-family:MS Shell Dlg}
</style>
<script>
//dodo,Email:dodo@963.net|QQ:15516
var strEmail=/@.+\../
var strHTML=/\<.|\>.$/
function checkBlank(str){
if(!eval(str).value){
return alertMsg(eval(str),請?zhí)顚懲暾畔ⅲ?
}
else{
yesok=yes
}
}
function checkNum(str){
if(yesok==yes){
if(!ChkString(eval(str).value)){
return alertMsg(eval(str),請?zhí)顚憯?shù)字)
}
else{
yesok=yes
}
}
}
function checkMin(str,num){
if(yesok==yes){
if(eval(str).value.length<num){
return alertMsg(eval(str),少了，此欄填寫最小長度為+num)
}
else{
yesok=yes
}
}
}
function checkMax(str,num){
if(yesok==yes){
if(eval(str).value.length>num){
return alertMsg(eval(str),多了，此欄填寫最大長度為+num)
}
else{
yesok=yes
}
}
}
function checkMail(str){
if(yesok==yes){
if(!strEmail.test(eval(str).value)) {
return alertMsg(eval(str),請輸入正確的郵件地址)
}
else{
yesok=yes
}
}
}
function checkHTML(str){
if(yesok==yes){
if(strHTML.test(eval(str).value)) {
return alertMsg(eval(str),不能包含HTML字符)
}
else{
yesok=yes
}
}
}
function splitcheck(str,typename){
checkno=new String(str)
checktype=checkno.split(,)
if(checktype[0]==1){
checkBlank(typename)
}
else{
yesok=yes
}
if(checktype[1]==1){
checkNum(typename)
}
if(checktype[2]==1){
checkMail(typename)
}
if(checktype[3]!=0){
checkMin(typename,checktype[3])
}
if(checktype[4]!=0){
checkMax(typename,checktype[4])
}
if(checktype[5]==1){
checkHTML(typename)
}
}
function checkForm(form){
var checkok=true;
for (var i=0;i<form.elements.length;i++)
{
var formName=form.name
var e=form.elements;
s=formName+.+e.name
splitcheck(e.checkstyle,s)
if(yesok==no){
checkok=false;
break;
}
}
return(checkok);
}
function ChkString(checkStr)
{
var checkOK = 0123456789;
var allValid = true;
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
}
return(allValid);
}
function alertMsg(element,msg){
alert(msg)
element.focus()
yesok=no
return false
}
</script>
</head>
<body><br>
<table align=center width=80% border=0 cellspacing=1 cellpadding=4 bgcolor=#d9d9d9>
<form action=# method=post name=formname onsubmit=return checkForm(this)>
<tr><td align=center height=20 colspan=2><b><font style=font-size:14.8px;>通用HTML頁面提交表單校驗javascript函數(shù)</b></font></td></tr>
<tr><td bgcolor=white width=150 align=right>檢驗是否為空</td><td bgcolor=white><input type=text name=name1 size=15 checkstyle=1,0,0,0,0,0 ></td></tr>
<tr><td bgcolor=white width=150 align=right>檢驗郵件格式</td><td bgcolor=white><input type=text name=name2 size=15 checkstyle=1,0,1,0,0,0></td></tr>
<tr><td bgcolor=white width=150 align=right>檢驗數(shù)字</td><td bgcolor=white><input type=text name=name3 size=15 checkstyle=1,1,0,0,0,0></td></tr>
<tr><td bgcolor=white width=150 align=right>檢驗字段長度</td><td bgcolor=white><input type=text name=name4 size=15 checkstyle=1,0,0,3,5,0>本例：3-5位數(shù)字</td></tr>
<tr><td bgcolor=white width=150 align=right>檢驗html字符</td><td bgcolor=white><input type=text name=name5 size=15 checkstyle=0,0,0,0,0,1></td></tr>
<tr><td bgcolor=white width=150 align=right>不檢驗</td><td bgcolor=white><input type=text name=name6 size=15 checkstyle=0,0,0,0,0,0></td></tr>
<tr><td bgcolor=white align=center colspan=2><input type=submit value= 確定 checkstyle=0,0,0,0,0,0> <input type=reset value= 重來 checkstyle=0,0,0,0,0,0></td></tr>
</form>
</table>
<br>
<table align=center width=80% border=0 cellspacing=1 cellpadding=4 >
<tr><td style=line-height:20px>
說明：javascript 函數(shù)本身不用更改，COPY這段JS到頁面里的<head></head>之間就可以使用，只需要在HTML頁面里的Form里所有元素里加上checkstyle=a,b,c,d,e,f（包括button,checkbox,radio等），需要說明的是checkstyle不是html的包含的標(biāo)準(zhǔn)語言,是我自己定義的。
<br><br>checkstyle=a,b,c,d,e,f的含義<br>
a --檢驗是否為空，值為：1或0，1表示檢驗，0表示跳過<br>
b --檢驗是否為數(shù)字，值為：1或0，1表示檢驗，0表示跳過<br>
c --檢驗郵件格式，值為：1或0，1表示檢驗，0表示跳過<br>
d --檢驗最小長度，值為：數(shù)字或0，數(shù)字表示檢驗(最小長度)，0表示跳過<br>
e --檢驗最大長度，值為：數(shù)字或0，數(shù)字表示檢驗(最大長度)，0表示跳過<br>
f --檢驗HTML字符，值為：1或0，1表示檢驗，0表示跳過<br>
checkstyle=0,0,0,0,0,0表示全部不檢驗<br>
<br>
使用：請按照form正常格式命名Form內(nèi)的字段名稱，不能有重復(fù)(命名字段時候注意不要使用javascript里面的一些常用詞語如：name等)。在 <form> 加上<form name=formname onsubmit=return checkForm(this)>,對于表單命名和表單內(nèi)字段命名無特別要求，對于一個頁面里有多個FORM情況，不需要另外寫函數(shù)，只需表單的名稱不一樣就可以使用。<br>
<br>###本程序在ie5和ie5.5上測試通過####
</td></tr></table>
</body>
</html>
