简单的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;

}

<!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>