导读:
通用表单验证函数-再改进版
主要内容:
一、用法简介:
二、类型定义:
三、程序文件:
历史:
2004.12.21
1.对整数的范围验证作了修改;
2.对Email的验证作了修改,以适应在帐号中带点的情况;
2004.12.20
1.从网上收集到此片文章的原型;
通用表单验证函数-再改进版
最后修改 2004.12.21
一、用法简介:
表单验证函数放在了functions.js文件里了,在你所需要做验证的网页文件里,包含该脚本文件。一般语法为:
<script src="./functions.js" type="text/javascript"></script>
对于焦点失去验证,为表单控件的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)
举例:
9、列表框(list) 定义: valueType="list" 属性: objName 对象名称(字符串) minSelect 最小选择数(数字) maxSelect 最大选择数(数字) 举例: 三、程序文件 /*****************functions.js**********************/ /***检查表单所有元素***/ function checkForm(formName) { var oForm=document.all(formName); var eles = oForm.elements; //遍历所有表元素 for(var i=0;i<eles.length;i++) <br=""> { //是否需要验证 var sType=eles[i].valueType; if(sType) { if(eles[i].mustInput!=null && eles[i].mustInput=="true") { 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 checkNumber() { var ele=event.srcElement; if(ele.valueType!=null) { if(ele.mustInput!=null && ele.mustInput=="true") { if(trim(ele.value)=="") { if(ele.objName!=null) { alert(ele.objName+"不可以为空"); } else { alert("该文本框为必输字段"); } ele.focus(); return false; } } if(ele.valueType=="int") checkInt(ele); else if(ele.valueType=="float") checkFloat(ele); else ; } return true; } /***检查是否为整数***/ function checkInt(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)) <br=""> { 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 checkFloat(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)) <br=""> { 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 checkString() { var ele=event.srcElement; if(ele.valueType!=null) { if(ele.mustInput!=null && ele.mustInput=="true") { if(trim(ele.value)=="") { if(ele.objName!=null) { alert(ele.objName+"不可以为空"); } else { alert("该文本框为必输字段"); } ele.focus(); return false; } } 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 checkDate() { var ele=event.srcElement; if(ele.valueType!=null) { if(ele.mustInput!=null && ele.mustInput=="true") { if(trim(ele.value)=="") { if(ele.objName!=null) { alert(ele.objName+"不可以为空"); } else { alert("该文本框为必输字段"); } ele.focus(); return false; } } if(!isDate(ele.value)) { alert("请输入有效日期(yyyy-mm-dd)"); ele.focus(); return false; } } return true; } /***检查是否为电子邮箱***/ function checkEmail() { var ele=event.srcElement; if(ele.valueType!=null) { if(ele.mustInput!=null && ele.mustInput=="true") { if(trim(ele.value)=="") { if(ele.objName!=null) { alert(ele.objName+"不可以为空"); } else { alert("该文本框为必输字段"); } ele.focus(); return false; } } if(!isEmail(ele.value)) { alert("请输入有效邮箱"); ele.focus(); return false; } } 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)) <br=""> { 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 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)) <br=""> { 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 validEmail(ele) { if(!isEmail(ele.value)) { alert("请输入有效邮箱"); ele.focus(); return false; } 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++) <br=""> { 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++) <br=""> { if(chks[i].checked) { selectCount++; } } if(ele.minSelect!=null && !isNaN(ele.minSelect)) { if(selectCount<parseint(ele.minselect)) <br=""> { 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++) <br=""> { if(ele.options[i].selected) { selectCount++; } } alert(selectCount); if(ele.minSelect!=null && !isNaN(ele.minSelect)) { if(selectCount<parseint(ele.minselect)) <br=""> { 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 isInt(s) { var patrn=/^[-,+]{0,1}[0-9]{0,}$/; if (!patrn.exec(s)) return false; return true; } /***判断是否为数字***/ function isNumber(s) { var patrn=/^[-,+]{0,1}[0-9]{0,}[.]{0,1}[0-9]{0,}$/; if (!patrn.exec(s)) 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 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; } /***将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) <br=""> { 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; } 本文转自 http://www.afuer.com/article.asp?id=170
分享到:
相关推荐
"JS通用表单验证函数1"是一个针对这一需求的解决方案,它提供了一种灵活且可复用的方法来验证不同类型的表单字段。 该资源可能包含一个或多个JavaScript函数,用于验证不同类型的数据,如数字、电子邮件、电话号码...
【JS通用表单验证函数】是前端开发中用于确保用户输入数据有效性和合规性的一种常见技术。在网页表单提交前,使用JavaScript进行验证可以提高用户体验,减少无效数据提交到服务器,同时减轻后端处理压力。 这个特定...
.net2005完美JavaScript通用表单验证函数,只需要包含此文件就可以实现验证功能.
本文将深入探讨“js通用表单验证代码”这一主题,以及如何利用JavaScript进行有效的表单验证。 首先,我们要理解JavaScript在表单验证中的角色。JavaScript是一种客户端脚本语言,它可以在用户的浏览器上运行,无需...
【最新实用的Validate通用表单验证Jquery插件】是一个高效、灵活的前端验证工具,专为使用Jquery框架的Web开发人员设计。这个插件极大地简化了表单验证的过程,使得用户输入的数据在提交前就能得到有效的检查,从而...
"通用的JS表单验证"这个主题聚焦于如何利用JavaScript来确保用户在网页表单中输入的数据符合预设的规则,从而提高数据质量和用户体验。下面我们将深入探讨这个话题。 首先,表单验证是网页开发中的关键部分,它能...
本主题聚焦于“万能通用智能JS表单验证”,这是一种利用JavaScript实现的高效、灵活的表单验证技术。表单验证是用户交互过程中的关键环节,它能够确保用户输入的数据符合预设的规则,从而减少服务器端的压力,提升...
"validate 通用Ajax无刷新表单验证类"就是针对这一需求设计的,旨在提供一个高效、便捷的解决方案,使得在用户填写表单时能够实时进行数据验证,无需等待页面刷新,极大地提高了用户体验。 Ajax(Asynchronous ...
在Web开发中,表单验证是一项至关重要的任务,它确保用户提交的数据符合预期的格式和标准,从而提高数据质量和安全性。本项目提供了一个高效、通用且简单易用的客户端表单输入验证类库函数,专注于JavaScript和正则...
《jQuery带Tips动画提示通用表单验证插件详解》 在网页开发中,表单验证是必不可少的一个环节,它能够确保用户输入的数据符合预设的规则,提高用户体验并减少服务器端的压力。jQuery Validate插件正是这样一个强大...
总之,Vue.js 提供了灵活的机制来实现表单验证,通过结合数据绑定、事件处理以及自定义验证规则,可以快速构建出满足需求的通用表单验证方案。在前后端分离的项目中,前端负责更多的业务逻辑和用户体验,因此掌握...
**基于jQuery的通用表单验证插件:formValidator3.1** 在Web开发中,表单验证是必不可少的一部分,它确保用户输入的数据符合预设的规则,从而提高数据的准确性和安全性。`formValidator3.1`是一款基于jQuery的插件...
JQ表单验证插件 使用方法:$.formValidate(options); version:1.6.0 @param {Object} options @param options.area 验证的区域父级元素,默认 body @param options.msg_type 错误提示类型:alert(自定义函数...
`validator`是一个通用的JavaScript表单验证类,它在网页开发中扮演着重要的角色,确保用户输入的数据符合预设的规则和格式。JavaScript和XML的结合使得`validator`类能够灵活地处理各种验证需求,同时提供了易于...
在网页开发中,表单验证是必不可少的一部分,它确保用户输入的数据符合预设的规则,从而提高用户体验并减少服务器端的处理压力。本资源提供的"完美表单验证js"就是一个全面的JavaScript解决方案,几乎涵盖了所有常见...
### 基于ASP.NET Ajax框架实现表单验证编程原理详解 #### 一、引言 随着Web应用程序的复杂度不断提高,确保用户数据的安全性和准确性变得尤为重要。ASP.NET Ajax框架提供了一种强大的方式来增强用户体验,并同时...
在网页开发中,表单验证是一项至关重要的任务,它确保用户输入的数据符合预期的格式和规则,从而提高数据质量和用户体验。jQuery Validate插件是jQuery库的一个扩展,专门用于实现这样的功能。这个插件提供了一种...
js form 验证通用函数 例子 onsubmit="checkField(this)" 请选择问卷题目!" name="field0"> <span id="field0Msg" style="color:red"></span>
### 使用JavaScript语言进行表单验证 #### JavaScript与表单验证的重要性 随着互联网技术的飞速发展,表单作为用户向服务器提交数据的主要方式之一,在现代Web应用中扮演着至关重要的角色。为了确保提交的数据准确...