一、用法简介：
表单验证函数放在了functions.js文件里了，在你所需要做验证的网页文件里，包含该脚本文件。一般语法为:
<script type="text/javascript" src="./functions.js">
对于焦点失去验证，为表单控件的onBlur事件绑定相应的验证函数，用法如下：
整型 checkNumber()
浮点型 checkNumber()
字符串 checkString()
日期 checkDate()
邮箱 checkEmail()
示例 onBlur="checkNumber()"
对于表单提交验证，在表单提交前进行判断，用法如下：
if(checkForm('表单名称'))
{
表单名称.submit();
return true;
}
else
{
return false;
}
也可以绑定表单onSubmit事件，用法如下：
onSubmit="return checkForm('表单名称')"
二、类型定义：
1、整型(int)
定义:
valueType="int"
属性:
objName 对象名称(字符串)
mustInput 必输项(true/false)
minInput 最小值(数字)
maxInput 最大值(数字)
举例:
<input type="text" name="test" valueType="int" objName="总载重吨" mustInput="true" maxInput="10000">
2、浮点型(float)
定义:
valueType="float"
属性:
objName 对象名称(字符串)
mustInput 必输项(true/false)
minInput 最小值(数字)
maxInput 最大值(数字)
decimalLen小数位数(数字)
举例:
<input type="text" name="test" valueType="float" objName="运价" mustInput="true" maxInput="10000.50" decimalLen="2">
3、字符串(string)
定义:
valueType="string"
属性:
objName 对象名称(字符串)
mustInput 必输项(true/false)
stringLen 字符串长度(数字)
举例:
<input type="text" name="test" valueType="string" objName="英文船名" mustInput="true" stringLen="100">
4、日期(date)
定义:
valueType="date"
属性:
objName 对象名称(字符串)
mustInput 必输项(true/false)
举例:
<input type="text" name="test" valueType="date" objName="开始日期" mustInput="true">
备注:
日期现在只能校验的格式为(yyyy-mm-dd)
5、邮箱(email)
定义:
valueType="email"
属性:
objName 对象名称(字符串)
mustInput 必输项(true/false)
举例:
<input type="text" name="test" valueType="email" objName="邮箱" mustInput="true">
6、单选(radio) 暂没调试成功
定义:
valueType="radio"
属性:
objName 对象名称(字符串)
mustSelect 必输项(true/false)
举例:
<input type="radio" name="test" valueType="radio" objName="租船方式" mustSelect="true">
备注:
对于同一组单选按钮，只需要定义第一个即可。
7、复选(checkbox) 暂没调试成功
定义:
valueType="checkbox"
属性:
objName 对象名称(字符串)
minSelect 最小选择数(数字)
maxSelect 最大选择数(数字)
举例:
<input type="checkbox" name="test" valueType="checkbox" objName="爱好" minSelect="2" maxSelect="5">
备注:
对于同一组复选按钮，只需要定义第一个即可。
8、下拉列表框(select)
定义:
valueType="select"
属性:
objName 对象名称(字符串)
mustSelect 必输项(true/false)
举例1:
<select name="test" valueType="select" objName="租船方式" mustSelect="true">
举例2:
<select name="test" valueType="select" objName="租船方式" mustSelect="true">
<option type="checkbox" name="test2" >请选择<option>
<option type="checkbox" name="test2" >3 <option>
<option type="checkbox" name="test2" >4 <option>
</select>
9、列表框(list)
定义:
valueType="list"
属性:
objName 对象名称(字符串)
minSelect 最小选择数(数字)
maxSelect 最大选择数(数字)
举例:
<select name="test" valueType="list" objName="爱好" size =5 minSelect="2" maxSelect="5">
三、程序文件
/*****************functions.js**********************/
/***检查表单所有元素***/
function checkForm(formName)
{
var oForm=document.all(formName);
var eles = oForm.elements;
//var els
//遍历所有表元素
for(var i=0;i<eles.length;i++)
{
//是否需要验证
var sType=eles[i].valueType;
if(sType)
{
if(eles[i].mustInput!=null && eles[i].mustInput=="true"
{
//els=eles[i].value;
//els=trim(els);
if(trim(eles[i].value)==""
{
if(eles[i].objName!=null)
{
alert(eles[i].objName+" 不可以为空";
}
else
{
alert("该文本框为必输字段";
}
eles[i].focus();
event.returnValue=false;
return false;
}
}
switch(sType)
{
//整数
case "int":
if(!validInt(eles[i]))
{
event.returnValue=false;
return false;
}
break;
//小数
case "float":
if(!validFloat(eles[i]))
{
event.returnValue=false;
return false;
}
break;
//字符串
case "string":
if(!validString(eles[i]))
{
event.returnValue=false;
return false;
}
break;
//日期
case "date":
if(!validDate(eles[i]))
{
event.returnValue=false;
return false;
}
break;
//邮件
case "email":
if(!validEmail(eles[i]))
{
event.returnValue=false;
return false;
}
break;
//单选按钮
/*case "radio":
if(!validRadio(eles[i]))
{
event.returnValue=false;
return false;
}
break;
//复选按钮
case "checkbox":
if(!validBox(eles[i]))
{
event.returnValue=false;
return false;
}
break;*/
//下拉列表框
case "select":
if(!validSelect(eles[i]))
{
event.returnValue=false;
return false;
}
break;
//列表框
case "list":
if(!validList(eles[i]))
{
event.returnValue=false;
return false;
}
break;
}
}
}
event.returnValue=true;
return true;
}
/***验证是否为整数***/
function validInt(ele)
{
if(!isInt(ele.value))
{
alert("请输入有效整数";
ele.focus();
return false;
}
else
{
if(ele.maxInput!=null && !isNaN(ele.maxInput))
if(parseInt(ele.maxInput)<parseInt(ele.value))
{
alert("您输入的 "+ convertNullToSpace(ele.objName)+" 值应该小于"+ele.maxInput);
ele.focus();
return false;
}
if(ele.minInput!=null && !isNaN(ele.minInput))
if(parseInt(ele.minInput)>parseInt(ele.value))
{
alert("您输入的 "+ convertNullToSpace(ele.objName)+" 值应该大于"+ele.minInput);
ele.focus();
return false;
}
}
return true;
}
/***判断是否为整数***/
function isInt(s)
{
var patrn=/^0|^[1-9]\d*/;
if (!patrn.exec(s))
{
return false;
}
else
{
return true;
}
}
/***验证是否为小数***/
function validFloat(ele)
{
if(isNaN(ele.value))
{
alert("请输入有效数字";
ele.focus();
return false;
}
else
{
if(ele.decimalLen!=null && !checkDecimal(ele.value,ele.decimalLen))
{
alert("您输入的 "+convertNullToSpace(ele.objName)+" 值小数位最多为"+ele.decimalLen+"个小数位";
ele.focus();
return false;
}
if(ele.maxInput!=null && !isNaN(ele.maxInput))
if(parseInt(ele.maxInput)<parseInt(ele.value))
{
alert("您输入的 "+ convertNullToSpace(ele.objName)+" 值应该小于"+ele.maxInput);
ele.focus();
return false;
}
if(ele.minInput!=null && !isNaN(ele.minInput))
if(parseInt(ele.minInput)>parseInt(ele.value))
{
alert("您输入的 "+ convertNullToSpace(ele.objName)+" 值应该大于"+ele.minInput);
ele.focus();
return false;
}
}
return true;
}
/***验证是否为字符串***/
function validString(ele)
{
if(ele.stringLen!=null && !isNaN(ele.stringLen))
{
var value=new String(ele.value);
if(value.length>parseInt(ele.stringLen))
{
alert("您输入的 "+convertNullToSpace(ele.objName)+" 字数最大长度为"+ele.stringLen);
ele.focus();
return false;
}
}
return true;
}
/***验证是否为日期格式***/
function validDate(ele)
{
if(!isDate(ele.value)&&ele.value!=""
{
alert("请输入有效日期(yyyy-mm-dd)";
ele.focus();
return false;
}
return true;
}
/***判断是否为日期***/
function isDate(str)
{
var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})/);
if(r==null)
{
return false;
}
var d= new Date(r[1], r[3]-1, r[4]);
if(!(d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]))
{
return false;
}
return true;
}
/***验证是否为电子邮箱***/
function validEmail(ele)
{
if(!isEmail(ele.value))
{
alert("请输入有效邮箱";
ele.focus();
return false;
}
return true;
}
/***判断是否为邮箱***/
function isEmail(str)
{
if(str.match(/[\w-.]+@{1}[\w-]+\.{1}\w{2,4}(\.{0,1}\w{2}){0,1}/ig)!=str)
return false;
else
return true;
}
/***验证单选按钮是否需要选择***/
function validRadio(ele)
{
//var rads = document.getElementsByName(ele.name);
eval("var rads="+name+"."+ele.name);
var selectCount=0;
for(var i=0;i<rads.length;i++)
{
if(rads[i].checked)
{
selectCount++;
}
}
if(ele.mustSelect!=null && ele.mustSelect)
{
if(selectCount==0)
{
alert("请选择"+convertNullToSpace(ele.objName));
ele.focus();
return false;
}
}
return true;
}
/***验证复选按钮是否需要选择***/
function validBox(ele)
{
//var rads = document.getElementsByName(ele.name);
eval("var chks="+name+"."+ele.name);
var selectCount=0;
for(var i=0;i<chks.length;i++)
{
if(chks[i].checked)
{
selectCount++;
}
}
if(ele.minSelect!=null && !isNaN(ele.minSelect))
{
if(selectCount<parseInt(ele.minSelect))
{
alert(convertNullToSpace(ele.objName)+"至少选择"+ele.minSelect+"项";
ele.focus();
return false;
}
}
if(ele.maxSelect!=null && !isNaN(ele.maxSelect))
{
if(selectCount>parseInt(ele.maxSelect))
{
alert(convertNullToSpace(ele.objName)+"至多选择"+ele.maxSelect+"项";
ele.focus();
return false;
}
}
return true;
}
/***验证下拉列表框是否需要选择***/
function validSelect(ele)
{
//var rads = document.getElementsByName(ele.name);
if(ele.mustSelect!=null && ele.mustSelect)
{
if(ele.selectedIndex==0)
{
alert("请选择"+convertNullToSpace(ele.objName));
ele.focus();
return false;
}
}
return true;
}
/***验证列表框的选择项数***/
function validList(ele)
{
//var rads = document.getElementsByName(ele.name);
var selectCount=0;
for(var i=0;i<ele.options.length;i++)
{
if(ele.options[i].selected)
{
selectCount++;
}
}
if(ele.minSelect!=null && !isNaN(ele.minSelect))
{
if(selectCount<parseInt(ele.minSelect))
{
alert(convertNullToSpace(ele.objName)+"至少选择"+ele.minSelect+"项";
ele.focus();
return false;
}
}
if(ele.maxSelect!=null && !isNaN(ele.maxSelect))
{
if(selectCount>parseInt(ele.maxSelect))
{
alert(convertNullToSpace(ele.objName)+"至多选择"+ele.maxSelect+"项";
ele.focus();
return false;
}
}
return true;
}
/***将NULL转化为空格，用于显示对象名称***/
function convertNullToSpace(paramValue)
{
if(paramValue==null)
return "";
else
return paramValue;
}
/***检查小数位数***/
function checkDecimal(num,decimalLen)
{
var len = decimalLen*1+1;
if(num.indexOf('.')>0)
{
num=num.substr(num.indexOf('.')+1,num.length-1);
if ((num.length)<len)
{
return true;
}
else
{
return false;
}
}
return true;
}
/***去除空格***/
function trim(str)
{
if (str.length > 0)
{
while ((str.substring(0,1) == " ") && (str.length > 0))
{
str = str.substring(1,str.length);
}
while (str.substring(str.length-1,str.length) == " ")
{ str = str.substring(0,str.length-1); }
}
return str;
}
===============================================================
函数Reset()按Reset按钮后对各字段的内容复位。
函数submitForms()按submit按钮后对字段合法性检查后发送电子邮件。
函数isName()对姓名字段进行合法性检查。
函数isEmail()对电子邮件地址字段进行合法性检查。
函数isBrowser()对浏览器字段与自动检测的浏览器版本进行比较。
函数isCountry()对国家字段进行合法性检查。
函数isComment()对意见字段进行合法性检查，不允许为空值。
函数isFavorite()对喜欢的站点字段进行合法性检查，不允许为空值。
程序中还提供了一些技巧，例如，如何判断浏览器的版本，字符串的操作等等。
结果是以电子邮件的形式提供给你的，里面有客人输入的各个字段。程序比较长，但不难看懂，下面是源代码：
＜HTML＞
＜HEAD＞
＜TITLE＞ 用JavaScript 编 制 留 言 簿 程 序＜/TITLE＞
＜SCRIPT LANGUAGE="JavaScript"＞
＜!-- Begin
//Someone@abc.com 是 你 自 己 的 电 子 邮 件 地 址
var emailAddress="Someone@abc.com";
function toName()
{
var toNameval=document.forms[0].elements[1].value;
toNameval = "mailto:Someone@abc.com?subject=Guest Book example";
this.document.mail.action = toNameval;
}
function Reset() {
document.forms[0].elements[0].value = "";
document.forms[0].elements[1].value = "";
document.forms[0].elements[2].value =
navigator.appName + " " + navigator.appVersion;
document.forms[0].elements[3].value = "";
document.forms[0].elements[4].value = "";
document.forms[0].elements[5].value = "";
document.forms[0].elements[0].focus();
}
function submitForms() {
if ( (isName() ) && (isEmail()) && (isBrowser())
&& (isCountry()) && (isComment()) && (isFavorite()) )
if (confirm("\nYou're about to e-mail the form.\n\nClick
on YES to submit.\n\nClick on NO to abort."))
{
alert("\nYour submission will now be made to :
\n\n"+emailAddress+"\n\n\nThank you!");
return true;
}
else
{
alert("\nYou have chosen to abort the submission.");
return false;
}
else
return false;
}
function isName() {
var str = document.forms[0].elements[0].value;
if (str == "") {
alert("\nThe NAME field is blank.\n\nPlease enter your name.")
document.forms[0].elements[0].focus();
return false;
}
for (var I = 0; I ＜str.length; I++)
{
var ch = str.substring(I, I + 1);
if (((ch ＜"a" || "z" ＜ch) && (ch ＜"A" || "Z" ＜ch)) && ch != ' ')
{
alert("\nThe NAME field only accepts letters
& spaces.\n\nPlease re-enter your name.");
document.forms[0].elements[0].select();
document.forms[0].elements[0].focus();
return false;
}
}
return true;
}
function isEmail()
{
emailAddress=document.forms[0].elements[1].value;
if (document.forms[0].elements[1].value == "") {
alert("\nThe E-MAIL field is blank.
\n\nPlease enter your e-mail address.")
document.forms[0].elements[1].focus();
return false;
}
if (document.forms[0].elements[1].value.indexOf ('@',0) == -1 ||
document.forms[0].elements[1].value.indexOf ('.',0) == -1)
{
alert("\nThe E-MAIL field requires a \"@\"
and a \".\"be used.\n\nPlease re-enter your e-mail address.")
document.forms[0].elements[1].select();
document.forms[0].elements[1].focus();
return false;
}
else
{
toName();
return true;
}
}
function isBrowser()
{
if (document.forms[0].elements[2].value !
= navigator.appName + " " + navigator.appVersion)
{
if (confirm("\nYou've changed your browser
type.\n\nClick on OK to keep changes.\
n\nClick on Cancel to restore detected browser."))
return true
else
{
document.forms[0].elements[2].value =
navigator.appName + " " + navigator.appVersion;
return true;
}
}
else
return true;
}
function isCountry() {
var str = document.forms[0].elements[3].value;
if (str == "") {
alert("\nThe COUNTRY field is
blank.\n\nPlease enter your country.")
document.forms[0].elements[3].focus();
return false;
}
for (var I = 0; I ＜str.length; I++) {
var ch = str.substring(I, I + 1);
if (((ch ＜"a" || "z" ＜ch) &&
(ch ＜"A" || "Z" ＜ch)) && ch != ' ')
{
alert("\nThe COUNTRY field only accepts
letters & spaces.\n\nPlease re-enter your country.");
document.forms[0].elements[3].select();
document.forms[0].elements[3].focus();
return false;
}
}
return true;
}
function isComment() {
if (document.forms[0].elements[4].value == "") {
if (confirm("\nYou're about to submit
without leaving a comment.\n\nClick
on CANCEL to include a comment.\n\nClick
on OK to continue without a comment."))
return true
else
{
document.forms[0].elements[4].focus();
return false;
}
}
else
return true
}
function isFavorite() {
if (document.forms[0].elements[5].value == "") {
if (confirm("\nYou're about to submit without
listing your favorite sites.\n\nClick on CANCEL
to include favorites.\n\nClick on OK to continue
without listing favorites."))
return true
else
{
document.forms[0].elements[5].focus();
return false;
}
}
else
return true
}
// End --＞
＜/SCRIPT＞