HTML表单(Form)提交检验通用javascript函数z -- 77家的会客厅 3rgb.com

Weather:秋高气爽,天气凉了....

2004-10-20

转自:http://www.do-do.org/blog/showlog.asp?cat_id=2&log_id=15

HTML表单(Form)提交检验通用javascript函数，以前写的，丰富一下偶的BLOG
一直以来为HTML表单提交校验的问题头痛，总是在写重复的js代码，所以一直想写一个通用的JS函数，总算找了个时间写了个通用的一段javascript供大家参考。
本JS程序，可以校验字段是否为空，是否为数字，判断字段长度，检验Email格式，检验是否含有HTML标签等功能
需要的朋友可以把下面的代码COPY后另存为html，HTML文件里详细使用说明。
<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>

var strEmail=/@.+\../
var strHTML=/\<.|\>.$/
function checkBlank(str){
if(!eval(str).value){
return alertMsg(eval(str),"请填写完整信息！")
}
else{
yesok="yes"
}
}

function checkNum(str){
if(yesok=="yes"){
if(!ChkString(eval(str).value)){
return alertMsg(eval(str),"请填写数字")
}
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函数</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>检验字段长度</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=" 重来 " 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 函数本身不用更改，COPY这段JS到页面里的<head></head>之间就可以使用，只需要在HTML页面里的Form里所有元素里加上checkstyle="a,b,c,d,e,f"（包括button,checkbox,radio等），需要说明的是checkstyle不是html的包含的标准语言,是我自己定义的。
<br><br>checkstyle="a,b,c,d,e,f"的含义<br>
a --检验是否为空，值为：1或0，1表示检验，0表示跳过<br>
b --检验是否为数字，值为：1或0，1表示检验，0表示跳过<br>
c --检验邮件格式，值为：1或0，1表示检验，0表示跳过<br>
d --检验最小长度，值为：数字或0，数字表示检验(最小长度)，0表示跳过<br>
e --检验最大长度，值为：数字或0，数字表示检验(最大长度)，0表示跳过<br>
f --检验HTML字符，值为：1或0，1表示检验，0表示跳过<br>
checkstyle="0,0,0,0,0,0"表示全部不检验<br>
<br>
使用：请按照form正常格式命名Form内的字段名称，不能有重复(命名字段时候注意不要使用JAVASCRIPT里面的一些常用词语如：name等)。在 <form> 加上<form name=formname onsubmit="return checkForm(this)">,对于表单命名和表单内字段命名无特别要求，对于一个页面里有多个FORM情况，不需要另外写函数，只需表单的名称不一样就可以使用。<br>
<br>###本程序在ie5和ie5.5上测试通过####
</td></tr></table>
</body>
</html>