一个简单的JavaScript表单验证框架

1.validate.js

/** * 通常在我们的HTML页面表单中有大量的数据验证工作， * 免不了要写很多验证表单的js代码，这是一项非常繁琐 * 枯燥的工作。很多程序员也会经常遗漏这项工作。当然 * 一些JavaEE框架中有一些比较好的验证框架提供给我们 * 使用，但是也是需要很多繁琐的配置，页面查看起来也 * 不是很方便。一般程序员使用的也不多。所以写了这一 * 段JavaScript代码提供给大家使用。算是一个简单的 * JavaScript验证框架吧。使用起来很简单，配合下面几 * 种标签使用，能实现大多数表单验证。 * 1.验证输入框类，包括，text,textarea,password,hidden等 * <textValidate * field="username" //对应待验证的输入框name属性 * lableText="用户名" //验证未通过时提示名称 * altText="用户名必须是数字，字母，下划线，长度在5-10之间" * //验证未通过时的提示文字，可不设置，不设置该属性时使用lableText属性提示 * isValidate="false" //是否验证 * min="5" //最小长度 * max="10" //最大长度 * dataType="account"> //数据类型，可选值：string(字符串), * int(整数),email,account(只能是数字，字母，下划线), * phone(国内电话号码),postcode(国内邮政编码),code(国内身份证号码), * ip(电脑IP地址),正则表达式字符串 * 2.验证单选和复选框是否必选，包括，radio,checkbox等 * <radioValidate * field="sex" * altText="" * lableText="性别" * isValidate="false"> * 3.验证下拉框是否必选，包括，select等 * <selectValidate * field="city" * altText="" * lableText="所在城市" * isValidate="true" * noValue="-1"> //下拉框不选择时的默认值 * Author：BluesLee <br> * CreateDate：2009-8-7 <br> * Modifier：BluesLee <br> * ModifyDate：2009-8-10 <br> * Version:1.0<br> * Copyright(c)2009 深蓝工作室<br> * All right reserved.<br> * */ /** * 表单数据验证<br> * Author：BluesLee <br> * CreateDate：2009-8-7 <br> * Modifier：BluesLee <br> * ModifyDate：2009-8-10 <br> * Version:1.0<br> * * @param frm,待验证的表单对象 * @return 验证通过返回true,验证失败返回false */ function validate(frm){ var textValidate=frm.getElementsByTagName("textValidate"); for(var i=0;i<textValidate.length;i++){ var isValidate=textValidate[i].getAttribute("isValidate"); if(isValidate=="false") { continue; } var lable=textValidate[i].getAttribute("lableText"); var min=textValidate[i].getAttribute("min"); var max=textValidate[i].getAttribute("max"); var datatype=textValidate[i].getAttribute("dataType"); var alt=textValidate[i].getAttribute("altText"); var field=document.getElementsByName(textValidate[i].getAttribute("field"))[0]; if(min && min.length>0 && field.value.length<min){ if(alt && alt.length>0){ alert(alt); }else{ alert(lable+"不能小于"+min+"位！"); } if(field.select)field.select(); field.focus(); return false; } if(max && max.length>0 && field.value.replace(/[^x00-xff]/g,"aa").length>max){ if(alt && alt.length>0){ alert(alt); }else{ alert(lable+"不能大于"+max+"位！"); } if(field.select)field.select(); field.focus(); return false; } if(datatype && datatype.length>0){ if(datatype=="int"){ if(!/^[0-9]+$/g.test(field.value)){ if(field.select)field.select(); field.focus(); if(alt && alt.length>0){ alert(alt); }else{ alert(lable+"只能输入整数！"); } return false; } }else if(datatype=="email"){ if(!/^([a-zA-Z0-9_/-/./+]+)@((/[[0-9]{1,3}/.[0-9]{1,3}/.[0-9]{1,3}/.)|(([a-zA-Z0-9/-]+/.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(/]?)$/g.test(field.value)){ if(field.select)field.select(); field.focus(); if(alt && alt.length>0){ alert(alt); }else{ alert("Email格式不正确！"); } return false; } }else if(datatype=="account"){ if(!/^[a-zA-Z0-9_]+$/g.test(field.value)){ if(field.select)field.select(); field.focus(); if(alt && alt.length>0){ alert(alt); }else{ alert(lable+"只能是数字，字母和下划线！"); } return false; } }else if(datatype=="phone"){ if(!/^d{3}-d{8}|d{4}-d{7}$/g.test(field.value)){ if(field.select)field.select(); field.focus(); if(alt && alt.length>0){ alert(alt); }else{ alert("电话号码格式不正确，正确格式：0511-4405222 或 021-87888822"); } return false; } }else if(datatype=="postcode"){ if(!/^[1-9]d{5}(?!d)$/g.test(field.value)){ if(field.select)field.select(); field.focus(); if(alt && alt.length>0){ alert(alt); }else{ alert("邮政编码不正确"); } return false; } }else if(datatype=="code"){ if(!/^d{15}|d{18}$/g.test(field.value)){ if(field.select)field.select(); field.focus(); if(alt && alt.length>0){ alert(alt); }else{ alert("身份证号码不正确"); } return false; } }else if(datatype=="ip"){ if(!/^(((1?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))/.){3}((1?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))$/g.test(field.value)){ if(field.select)field.select(); field.focus(); if(alt && alt.length>0){ alert(alt); }else{ alert("IP地址格式不正确"); } return false; } }else{ if(!new RegExp(datatype,"g").test(field.value)){ if(field.select)field.select(); field.focus(); if(alt && alt.length>0){ alert(alt); }else{ alert(lable+"输入格式不正确！"); } return false; } } } } var radioValidate=frm.getElementsByTagName("radioValidate"); for(var i=0;i<radioValidate.length;i++){ var isValidate=radioValidate[i].getAttribute("isValidate"); if(isValidate=="false") { continue; } var lable=radioValidate[i].getAttribute("lableText"); var alt=textValidate[i].getAttribute("altText"); var field=document.getElementsByName(radioValidate[i].getAttribute("field")); var flag=true; for(var j=0;j<field.length;j++){ if(field[j].checked){ flag=false; break; } } if(flag){ if(alt && alt.length>0){ alert(alt); }else{ alert(lable+"为必选项！"); } return false; } } var selectValidate=frm.getElementsByTagName("selectValidate"); for(var i=0;i<selectValidate.length;i++){ var isValidate=selectValidate[i].getAttribute("isValidate"); if(isValidate=="false") { continue; } var lable=selectValidate[i].getAttribute("lableText"); var alt=textValidate[i].getAttribute("altText"); var noValue=selectValidate[i].getAttribute("noValue"); var field=document.getElementsByName(selectValidate[i].getAttribute("field"))[0]; if(field.value==noValue){ if(alt && alt.length>0){ alert(alt); }else{ alert(lable+"为必选项！"); } return false; } } return true; }

2.test.jsp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <mce:script language="JavaScript" src="validate.js" mce_src="validate.js"></mce:script> </HEAD> <BODY> <form onsubmit="return validate(this);"> <textValidate field="username" lableText="用户名" isValidate="false" min="5" max="10" dataType="account"> 用户名 <input name="username" type="text"><br> <textValidate field="password" lableText="密码" isValidate="false" min="6" dataType="^[a-zA-Z0-9_]+$"> 密码 <input name="password" type="password"><br> <textValidate field="email" lableText="Email" isValidate="false" dataType="email"> Email <input name="email" type="text"><br> <radioValidate field="sex" lableText="性别" isValidate="true"> 性别 <input name="sex" type="radio">男 <input name="sex" type="radio">女<br> <radioValidate field="hunyin" lableText="婚姻状况" isValidate="true"> 婚姻状况 <input name="hunyin" type="radio">已婚 <input name="hunyin" type="radio">未婚<br> 兴趣爱好 <radioValidate field="love" lableText="兴趣爱好" isValidate="true"> <input name="love" type="checkbox">篮球 <input name="love" type="checkbox">足球<br> 所在城市 <selectValidate field="city" lableText="所在城市" isValidate="true" noValue="-1"> <select name="city"> <option value="-1">请选择...</option> <option value="上海">上海</option> <option value="北京">北京</option> <option value="西安">西安</option> </select> <input type="submit"> </form> </BODY> </HTML>