|
HTML表单(Form)提交检验通用javascript函数
作者：佚名 转贴自：本站原创 点击数：136
HTML表单(Form)提交检验通用javascript函数
一直以来为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>
//dodo,Email:dodo@963.net|QQ:15516
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>
|
