搜索
首页web前端js教程如何使用正则表达式和javascript对表单进行全面验证

使用时请将下面的javascript代码存到一个单一的js文件中。
1、表单要求

<form name="formname" onSubmit="return validateForm(this)"></form>

将对表单中的所有以下类型的域依次验证,所有验证是去除了前导和后缀空格的,要注意是区分大小写的。
2、空值验证
表单中任意域加上emptyInfo属性将对此域是否为空进行验证(可以和最大长度验证\一般验证方式同时使用)。
无此属性视为此域允许空值。
如:76fcbe9cf4728131adeaeefb1d19e404
3、最大长度验证(可以和空值验证、一般验证方式同时使用):
7090effba10d5a8d06f390b8f397dffa
或,854d848c6aacabd3a6930a1f7cc1a264
3、一般验证方式(不对空值做验证):
如:2777422c368dfc08ffebbfa3b9685492
4、标准验证(不与其它验证方式同时使用):
全部通过6bfea39e2880ed1f176d4faec8788f49来实现,并且不需要name属性以免提交到服务器。
4.1、合法日期验证:

<input type="text" name="yearfieldName" value="2004">注:这里也可以是<select name="yearfieldName"></select>,以下同
<input type="text" name="monthfieldName" value="02">
<input type="text" name="dayfieldName" value="03">
<input type="hidden" validatorType="DateGroup" year="yearfieldName" month="monthfieldName" day="dayfieldName" errorInfo="不正确的日期!">

yearfieldName、monthfieldName、dayfieldName分别为年月日字段,月和日可以是两位(MM)或一位格式(M),
此处不对每个字段分别检验(如果要检验,请在年月日三个域分别使用前面的一般验证方式),只对日期的最大值是否合法检查;
4.2、日期格式验证(请注意,此验证不对日期是否有效进行验证,还未找到从格式中得到年月日数据的方法^_^):

<input type="text" name="datefieldName" value="2003-01-03 21:31:00">
<input type="hidden" validatorType="Date" fieldName="datefieldName"; format="yyyy-MM-dd HH:mm:ss" errorInfo="不正确的日期!">

其中格式仅对y、M、d、H、m、s进行支持(其它字符视为非时间的字符)
4.3、列表验证:
检验列表(checkbox、redio、select)是否至少选中了一条记录(对select主要用于多项选择)

<input type="checkbox" name="checkbox1">
<input type="hidden" validatorType="Checkbox" fieldName="checkbox1" errorInfo="请至少选中一条记录!">

其中validatorType可以是Checkbox、R、Select;
对于一个select表单,如果要求选择一条不能是第一条的记录,请用下列方式:

<select name="select1" emptyInfo="请选择一个选项!">
<option value="">==请选择==</option>
<option value="1">1</option>
<select>

4.4、Email验证:

<input type="text" name="email">
<input type="hidden" fieldName="email" validatorType="Email" separator="," errorInfo="不正确的Email!">

其中separator为可选项,表示输入多个email时的分隔符(无此选项只能是一个地址)
4.5、加入其它javascript操作:

<script type="text/javascript">
function functionname(){
自定义方法
}
</script>
表单中加入<input type="hidden" validatorType="javascript" functionName="functionname">(此时emptyInfo等属性无效)
时将调用function属性中指定的javascript方法(要求方法返回true或false,返回false将不再验证表单,也不提交表单)。
5、在表单通过验证提交前disable一个按钮(也可将其它域disable,不能与其它验证同在一个域),不要求按钮是表单中的最后一个
<input type="button" name="提交" validatorType="disable">
6、不验证表单
<input type="hidden" name="validate" value="0" functionName="functionname">
当validator域值为0时不对表单进行验证,直接提交表单或执行指定function并返回true后提交表单
functionName为可选
-->
<script type="text/javascript">
function getStringLength(str){
var endvalue=0;
var sourcestr=new String(str);
var tempstr;
for (var strposition = 0; strposition < sourcestr.length; strposition ++) {
tempstr=sourcestr.charAt(strposition);
if (tempstr.charCodeAt(0)>255 || tempstr.charCodeAt(0)<0) {
endvalue=endvalue+2;
} else {
endvalue=endvalue+1;
}
}
return(endvalue);
}
function trim(str){
if(str==null) return "";
if(str.length==0) return "";
var i=0,j=str.length-1,c;
for(;i<str.length;i++){
c=str.charAt(i);
if(c!=&#39; &#39;) break;
}
for(;j>-1;j--){
c=str.charAt(j);
if(c!=&#39; &#39;) break;
}
if(i>j) return "";
return str.substring(i,j+1);
}
function validateDate(date,format,alt){
var time=trim(date.value);
if(time=="") return;
var reg=format;
var reg=reg.replace(/yyyy/,"[0-9]{4}");
var reg=reg.replace(/yy/,"[0-9]{2}");
var reg=reg.replace(/MM/,"((0[1-9])|1[0-2])");
var reg=reg.replace(/M/,"(([1-9])|1[0-2])");
var reg=reg.replace(/dd/,"((0[1-9])|([1-2][0-9])|30|31)");
var reg=reg.replace(/d/,"([1-9]|[1-2][0-9]|30|31))");
var reg=reg.replace(/HH/,"(([0-1][0-9])|20|21|22|23)");
var reg=reg.replace(/H/,"([0-9]|1[0-9]|20|21|22|23)");
var reg=reg.replace(/mm/,"([0-5][0-9])");
var reg=reg.replace(/m/,"([0-9]|([1-5][0-9]))");
var reg=reg.replace(/ss/,"([0-5][0-9])");
var reg=reg.replace(/s/,"([0-9]|([1-5][0-9]))");
reg=new RegExp("^"+reg+"$");
if(reg.test(time)==false){//验证格式是否合法
alert(alt);
date.focus();
return false;
}
return true;
}
function validateDateGroup(year,month,day,alt){
var array=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var y=parseInt(year.value);
var m=parseInt(month.value);
var d=parseInt(day.value);
var maxday=array[m-1];
if(m==2){
if((y%4==0&&y%100!=0)||y%400==0){
maxday=29;
}
}
if(d>maxday){
alert(alt);
return false;
}
return true;
}
function validateCheckbox(obj,alt){
var rs=false;
if(obj!=null){
if(obj.length==null){
return obj.checked;
}
for(i=0;i<obj.length;i++){
if(obj[i].checked==true){
return true;
}
}
}
alert(alt);
return rs;
}
function validateRadio(obj,alt){
var rs=false;
if(obj!=null){
if(obj.length==null){
return obj.checked;
}
for(i=0;i<obj.length;i++){
if(obj[i].checked==true){
return true;
}
}
}
alert(alt);
return rs;
}
function validateSelect(obj,alt){
var rs=false;
if(obj!=null){
for(i=0;i<obj.options.length;i++){
if(obj.options[i].selected==true){
return true;
}
}
}
alert(alt);
return rs;
}
function validateEmail(email,alt,separator){
var mail=trim(email.value);
if(mail=="") return;
var em;
var myReg = /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/;
if(separator==null){
if(myReg.test(email.value)==false){
alert(alt);
email.focus();
return false;
}
}
else{
em=email.value.split(separator);
for(i=0;i<em.length;i++){
em[i]=em[i].trim();
if(em[i].length>0&&myReg.test(em[i])==false){
alert(alt);
email.focus();
return false;
}
}
}
return true;
}
function validateForm(theForm){// 若验证通过则返回true
var disableList=new Array();
var field = theForm.elements; // 将表单中的所有元素放入数组
for(var i = 0; i < field.length; i++){
var vali=theForm.validate;
if(vali!=null){
if(vali.value=="0"){
var fun=vali.functionName;
if(fun!=null){
return eval(fun+"()");
}
else{
return true;
}
}
}
var empty=false;
var value=trim(field[i].value);
if(value.length==0){//是否空值
empty=true;
}
var emptyInfo=field[i].emptyInfo;//空值验证
if(emptyInfo!=null&&empty==true){
alert(emptyInfo);
field[i].focus();
return false;
}
var lengthInfo=field[i].lengthInfo;//最大长度验证
if(lengthInfo!=null&&getStringLength(value)>field[i].maxLength){
alert(lengthInfo);
field[i].focus();
return false;
}
var validatorType=field[i].validatorType;
if(validatorType!=null){//其它javascript
var rs=true;
if(validatorType=="javascript"){
eval("rs="+field[i].functionName+"()");
if(rs==false){
return false;
}
else{
continue;
}
}
else if(validatorType=="disable"){//提交表单前disable的按钮
disableList.length++;
disableList[disableList.length-1]=field[i];
continue;
}
else if(validatorType=="Date"){
rs=validateDate(theForm.elements(field[i].fieldName),field[i].format,field[i].errorInfo);
}
else if(validatorType=="DateGroup"){
rs=validateDateGroup(theForm.elements(field[i].year),theForm.elements(field[i].month),theForm.elements(field[i].day),field[i].errorInfo);
}
else if(validatorType=="Checkbox"){
rs=validateCheckbox(theForm.elements(field[i].fieldName),field[i].errorInfo);
}
else if(validatorType=="Radio"){
rs=validateRadio(theForm.elements(field[i].fieldName),field[i].errorInfo);
}
else if(validatorType=="Select"){
rs=validateSelect(theForm.elements(field[i].fieldName),field[i].errorInfo);
}
else if(validatorType=="Email"){
rs=validateEmail(theForm.elements(field[i].fieldName),field[i].errorInfo);
}
else{
alert("验证类型不被支持, fieldName: "+field[i].name);
return false;
}
if(rs==false){
return false;
}
}
else{//一般验证
if(empty==false){
var v = field[i].validator; // 获取其validator属性
if(!v) continue; // 如果该属性不存在,忽略当前元素
var reg=new RegExp(v);
if(reg.test(field[i].value)==false){
alert(field[i].errorInfo);
field[i].focus();
return false;
}
}
}
}
for(i=0;i<disableList.length;i++){
disableList[i].disabled=true;
}
return true;
}
</script>


声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
JavaScript数据类型:浏览器和nodejs之间是否有区别?JavaScript数据类型:浏览器和nodejs之间是否有区别?May 14, 2025 am 12:15 AM

JavaScript核心数据类型在浏览器和Node.js中一致,但处理方式和额外类型有所不同。1)全局对象在浏览器中为window,在Node.js中为global。2)Node.js独有Buffer对象,用于处理二进制数据。3)性能和时间处理在两者间也有差异,需根据环境调整代码。

JavaScript评论:使用//和 / * * / * / * /JavaScript评论:使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript:开发人员的比较分析Python vs. JavaScript:开发人员的比较分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型,适合科学计算和数据分析。2.JavaScript采用弱类型,广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势,选择时应根据项目需求决定。

Python vs. JavaScript:选择合适的工具Python vs. JavaScript:选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型:1)数据科学和自动化任务选择Python;2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐,而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript:了解每个的优势Python和JavaScript:了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势,选择取决于项目需求和个人偏好。1.Python易学,语法简洁,适用于数据科学和后端开发,但执行速度较慢。2.JavaScript在前端开发中无处不在,异步编程能力强,Node.js使其适用于全栈开发,但语法可能复杂且易出错。

JavaScript的核心:它是在C还是C上构建的?JavaScript的核心:它是在C还是C上构建的?May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1)javascriptwasdesignedAsalightweight,解释edganguageforwebbrowsers.2)Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers,典型地提示。

JavaScript应用程序:从前端到后端JavaScript应用程序:从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验,后端通过Node.js处理服务器任务。1.前端示例:改变网页文本内容。2.后端示例:创建Node.js服务器。

Python vs. JavaScript:您应该学到哪种语言?Python vs. JavaScript:您应该学到哪种语言?May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统:1)职业发展:Python适合数据科学和后端开发,JavaScript适合前端和全栈开发。2)学习曲线:Python语法简洁,适合初学者;JavaScript语法灵活。3)生态系统:Python有丰富的科学计算库,JavaScript有强大的前端框架。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!