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

1.validate.js

/** * 通常在我们的HTML页面表单中有大量的数据验证工作， * 免不了要写很多验证表单的js代码，这是一项非常繁琐 * 枯燥的工作。很多程序员也会经常遗漏这项工作。当然 * 一些JavaEE框架中有一些比较好的验证框架提供给我们 * 使用，但是也是需要很多繁琐的配置，页面查看起来也 * 不是很方便。一般程序员使用的也不多。所以写了这一 * 段JavaScript代码提供给大家使用。算是一个简单的 * JavaScript验证框架吧。使用起来很简单，配合下面几 * 种标签使用，能实现大多数表单验证。 * 1.验证输入框类，包括，text,textarea,password,hidden等 * //数据类型，可选值：string(字符串), * int(整数),email,account(只能是数字，字母，下划线), * phone(国内电话号码),postcode(国内邮政编码),code(国内身份证号码), * ip(电脑IP地址),正则表达式字符串 * 2.验证单选和复选框是否必选，包括，radio,checkbox等 * * 3.验证下拉框是否必选，包括，select等 * //下拉框不选择时的默认值 * Author：BluesLee
* CreateDate：2009-8-7
* Modifier：BluesLee
* ModifyDate：2009-8-10
* Version:1.0
* Copyright(c)2009 深蓝工作室
* All right reserved.
* */ /** * 表单数据验证
* Author：BluesLee
* CreateDate：2009-8-7
* Modifier：BluesLee
* ModifyDate：2009-8-10
* Version:1.0
* * @param frm,待验证的表单对象 * @return 验证通过返回true,验证失败返回false */ function validate(frm){ var textValidate=frm.getElementsByTagName("textValidate"); for(var i=0;i0 && field.value.length0){ 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;i0){ alert(alt); }else{ alert(lable+"为必选项！"); } return false; } } var selectValidate=frm.getElementsByTagName("selectValidate"); for(var i=0;i0){ alert(alt); }else{ alert(lable+"为必选项！"); } return false; } } return true; }

2.test.jsp

用户名
密码
Email
性别 男 女
婚姻状况 已婚 未婚
兴趣爱好 篮球 足球
所在城市 请选择... 上海 北京 西安