一个简单的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.html

<!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="">
  <script language="JavaScript" src="validate.js"></script>
 </HEAD>

 <BODY>
  <form οnsubmit="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>