html表单元素js验证函数,通用js客户端表单验证函数

一、用法简介：

表单验证函数放在了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  最大值(数字)

举例:

2、浮点型(float)

定义:

valueType="float"

属性:

objName   对象名称(字符串)

mustInput 必输项(true/false)

minInput  最小值(数字)

maxInput  最大值(数字)

decimalLen小数位数(数字)

举例:

3、字符串(string)

定义:

valueType="string"

属性:

objName   对象名称(字符串)

mustInput 必输项(true/false)

stringLen 字符串长度(数字)

举例:

4、日期(date)

定义:

valueType="date"

属性:

objName   对象名称(字符串)

mustInput 必输项(true/false)

举例:

备注:

日期现在只能校验的格式为(yyyy-mm-dd)

5、邮箱(email)

定义:

valueType="email"

属性:

objName   对象名称(字符串)

mustInput 必输项(true/false)

举例:

6、单选(radio)  暂没调试成功

定义:

valueType="radio"

属性:

objName   对象名称(字符串)

mustSelect 必输项(true/false)

举例:

备注:

对于同一组单选按钮，只需要定义第一个即可。

7、复选(checkbox) 暂没调试成功

定义:

valueType="checkbox"

属性:

objName   对象名称(字符串)

minSelect 最小选择数(数字)

maxSelect 最大选择数(数字)

举例:

备注:

对于同一组复选按钮，只需要定义第一个即可。

8、下拉列表框(select)

定义:

valueType="select"

属性:

objName   对象名称(字符串)

mustSelect 必输项(true/false)

举例1:

举例2:

请选择

3

4

9、列表框(list)

定义:

valueType="list"

属性:

objName   对象名称(字符串)

minSelect 最小选择数(数字)

maxSelect 最大选择数(数字)

举例:

三、程序文件

/*****************functions.js**********************/

/***检查表单所有元素***/

function checkForm(formName)

{

var oForm=document.all(formName);

var eles = oForm.elements;

//var els

//遍历所有表元素

for(var i=0;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)

{

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)

{

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

{

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

{

if(chks[i].checked)

{

selectCount++;

}

}

if(ele.minSelect!=null && !isNaN(ele.minSelect))

{

if(selectCount

{

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

{

if(ele.options[i].selected)

{

selectCount++;

}

}

if(ele.minSelect!=null && !isNaN(ele.minSelect))

{

if(selectCount

{

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)

{

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＞