HTML表單(Form)提交檢驗通用javascript函數
作者：佚名 轉貼自：本站原創(chuàng ) 點(diǎn)擊數：136
HTML表單(Form)提交檢驗通用javascript函數
一直以來(lái)為HTML表單提交校驗的問(wèn)題頭痛，總是在寫(xiě)重復的js代碼，所以一直想寫(xiě)一個(gè)通用的JS函數，總算找了個(gè)時(shí)間寫(xiě)了個(gè)通用的一段javascript供大家參考。
本JS程序，可以校驗字段是否為空，是否為數字，判斷字段長(cháng)度，檢驗Email格式，檢驗是否含有HTML標簽等功能
需要的朋友可以把下面的代碼COPY后另存為html，HTML文件里詳細使用說(shuō)明。
<html>
<head>
<title>Form提交校驗通用javascript函數</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),請填寫(xiě)完整信息！)
}
else{
yesok=yes
}
}
function checkNum(str){
if(yesok==yes){
if(!ChkString(eval(str).value)){
return alertMsg(eval(str),請填寫(xiě)數字)
}
else{
yesok=yes
}
}
}
function checkMin(str,num){
if(yesok==yes){
if(eval(str).value.length<num){
return alertMsg(eval(str),少了，此欄填寫(xiě)最小長(cháng)度為+num)
}
else{
yesok=yes
}
}
}
function checkMax(str,num){
if(yesok==yes){
if(eval(str).value.length>num){
return alertMsg(eval(str),多了，此欄填寫(xiě)最大長(cháng)度為+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頁(yè)面提交表單校驗javascript函數</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>檢驗數字</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>檢驗字段長(cháng)度</td><td bgcolor=white><input type=text name=name4 size=15 checkstyle=1,0,0,3,5,0>本例：3-5位數字</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= 重來(lái) 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>
說(shuō)明：javascript 函數本身不用更改，COPY這段JS到頁(yè)面里的<head></head>之間就可以使用，只需要在HTML頁(yè)面里的Form里所有元素里加上checkstyle=a,b,c,d,e,f（包括button,checkbox,radio等），需要說(shuō)明的是checkstyle不是html的包含的標準語(yǔ)言,是我自己定義的。
<br><br>checkstyle=a,b,c,d,e,f的含義<br>
a --檢驗是否為空，值為：1或0，1表示檢驗，0表示跳過(guò)<br>
b --檢驗是否為數字，值為：1或0，1表示檢驗，0表示跳過(guò)<br>
c --檢驗郵件格式，值為：1或0，1表示檢驗，0表示跳過(guò)<br>
d --檢驗最小長(cháng)度，值為：數字或0，數字表示檢驗(最小長(cháng)度)，0表示跳過(guò)<br>
e --檢驗最大長(cháng)度，值為：數字或0，數字表示檢驗(最大長(cháng)度)，0表示跳過(guò)<br>
f --檢驗HTML字符，值為：1或0，1表示檢驗，0表示跳過(guò)<br>
checkstyle=0,0,0,0,0,0表示全部不檢驗<br>
<br>
使用：請按照f(shuō)orm正常格式命名Form內的字段名稱(chēng)，不能有重復(命名字段時(shí)候注意不要使用javascript里面的一些常用詞語(yǔ)如：name等)。在 <form> 加上<form name=formname onsubmit=return checkForm(this)>,對于表單命名和表單內字段命名無(wú)特別要求，對于一個(gè)頁(yè)面里有多個(gè)FORM情況，不需要另外寫(xiě)函數，只需表單的名稱(chēng)不一樣就可以使用。<br>
<br>###本程序在ie5和ie5.5上測試通過(guò)####
</td></tr></table>
</body>
</html>
聯(lián)系客服
