打印

番茄的表单验证类-omeweb修改美化版，结合JQ

omeweb [楼主]

橘子香水
中级会员

帖子: 430
体力: 378
威望: 5
当前: 广东深圳
离线: 4 天

专长 .NET,C#,MSSQL

1^# 大中小发表于 2008-1-14 17:10

首先要申明，我的修改是基于番茄的表单验证类的，原版见这里

我修改的
1,只是做了简单的美化
2,还有就是修复了原来的验证数字大于10，小于100 的BUG，其实很简单，加了一个parseInt而已，见笑了
3,增加了事件，当输入框离开的时候就立即显示验证结果，并不是等输入完毕了一起再来检测
4,支持一小区域内的表单验证，只要给出合适的selector

先看看效果图

演示是：
http://omeweb.com/photo/temp/validator/

使用：

复制内容到剪贴板

代码:

$(document).ready(setup);

function setup()

{validator.setup("#form1");}

注意，这里还支持一小区域内的表单验证，只要给出合适的selector（选择器请BAIDU下了）

写的比较仓促，大家多提意见。如果运行没有效果，请刷新一下，那是因为JQ还没下载下来。

代码是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>番茄的表单验证类</title>
<style>
.alert{border:1px solid red; }
.validator_msgSpan{border:solid 1px red;background-color:Yellow; font-size:12px;}
</style>
<script language="javascript" type="text/javascript" src="http://omeweb.com/photo/temp/validator/jquery.pack.js"></script>
<script language="javascript" type="text/javascript">
//去除字符串两边的空格
String.prototype.trim = function () {
    return this.replace(/(^\s+)|(\s+$)/g, "");
}
//检测字符串是否为空
String.prototype.isEmpty = function () {
    return !(/.?[^\s　]+/.test(this));
}
//检测值是否介于某两个指定的值之间
String.prototype.isBetween = function (val, min, max) {
    return isNaN(val) == false && val >= min && val <= max;
}
//获取最大值或最小值
String.prototype.getBetweenVal = function (what) {
    var val = this.split(',');
    var min = val[0];
    var max = val[1] == null ? val[0] : val[1];
    if (parseInt(min) > parseInt(max)) {
        min = max;
        max = val[0];
    }
    return what == 'min' ? (isNaN(min) ? null : min) : (isNaN(max) ? null : max);
}
var validator={};
//要用到的正则表达式
validator.reg={
	"english":/^[a-zA-Z0-9_\-]+$/,
    "chinese":/^[\u0391-\uFFE5]+$/,
    "number":/^[-\+]?\d+(\.\d+)?$/,
    "integer":/^[-\+]?\d+$/,
    "float":/^[-\+]?\d+(\.\d+)?$/,
    "date":/^(\d{4})(-|\/)(\d{1,2})\2(\d{1,2})$/,
    "email":/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
    "url" : /^(((ht|f)tp(s?))\:\/\/)[a-zA-Z0-9]+\.[a-zA-Z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,
    "phone" : /^(($\d{2,3}$)|(\d{3}\-))?($0\d{2,3}$|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,
    "mobile" : /^(($\d{2,3}$)|(\d{3}\-))?((13\d{9})|(159\d{8}))$/,
    "ip" : /^(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5]).(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5]).(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5]).(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5])$/,
    "zipcode": /^[1-9]\d{5}$/,
    "qq" : /^[1-9]\d{4,10}$/,
    "msn" : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
    "idcard" : /(^\d{15}$)|(^\d{17}[0-9Xx]$)/
};
//提示信息
validator.tip={
    "unknow":"未找到的验证类型，无法执行验证。",
    "paramError":"参数设置错误，无法执行验证。",
    "required":"不允许为空。",
    "english":"仅允许英文字符及下划线 (a-zA-Z0-9_)。",
    "chinese":"仅允许中文字符。",
    "number":"不是一个有效的数字。",
    "integer":"不是一个有效的整数。",
    "float":"不是一个有效的浮点数。",
    "date":"不是一个有效的日期格式。 (例如：2007-06-29)",
    "email":"不是一个有效的电子邮件格式。",
    "url":"不是一个有效的超链接格式。",
    "phone":"不是一个有效的电话号码。",
    "mobile":"不是一个有效的手机号码。",
    "ip":"不是一个有效的IP地址。",
    "zipcode":"不是一个有效的邮政编码。",
    "qq":"不是一个有效的QQ号码。",
    "msn":"不是一个有效的MSN帐户。",
    "idcard":"不是一个有效的身份证号码。",
	"notSame":"两次输入的内容不一致，请重新输入。"
};
//安装
validator.setup=function(selector)
{
	//var allTags=$(selector+" input,textarea,select");
	//alert(allTags.length);
	validator.selector=selector;
	$(selector+" input,textarea,select").each(
		function()
		{
			$(this).blur(function()
			{
				if(validator.doValidate($(this),validator.feedback))
				{
					validator.OK($(this));
				}
			})
		}
		);
}
//验证全部
validator.validatorAll=function(selector)
{
	var bl=true;
	if(typeof(validator.selector)=="undefined")//如果没有执行validator.setup
		validator.selector=selector;
	$(validator.selector+" input,textarea,select").each(
	function()
	{
		if(validator.doValidate($(this),validator.feedback))
		{
			validator.OK($(this));
		}
		else
			bl=false;
	}
	);
	
	return bl;
}
//关闭错误提示
validator.OK=function(ele)
{
	ele.next().fadeOut("slow",function(){ele.next().remove();});
	ele.removeClass("alert");
}
//显示错误提示
validator.feedback = function (ele,type) 
{
	var msg = validator.tip[type];
	if(typeof(msg)=="undefined")//type也可以直接是要显示的信息，注意，这个信息不能是tip的key，否则会有歧义
		msg=type;
	ele.addClass("alert");
	if(ele.parent().find(".validator_msgSpan").length>0)
	{
		return;
	}
	var _msgObj=$('&nbsp;<span class="validator_msgSpan" style="margin-left:2px;display:none;left:0px;  padding:2px;">'+msg+'</span>');
	ele.parent().append(_msgObj);
	_msgObj.fadeIn("slow");
}
//执行验证
validator.doValidate=function(element,feedback)
{
	var v = element.val();
	//alert(v);
	var ControlName=element.attr("controlName");
	//验证是否允许非空
	var required = element.attr('required');
	if (required != null && v.isEmpty()) {
		feedback(element,'required');
		return false;
	}
	//验证是否合法格式
	var dataType = element.attr('dataType');
	if (!v.isEmpty() && dataType != null &&  dataType.toLowerCase() != 'password') {
		dataType = dataType.toLowerCase();
		try {
			if (!( validator.reg[dataType]).test(v)) {
				feedback(element,dataType);
				return false;
			}
		} catch(e) {
			feedback(element,'unknow');
			return false;
		}
	}
	//执行数据验证
	var confirmObj = element.attr('confirmObj');
	if (confirmObj != null) {
		try {
			var data = $(confirmObj).val();//eval('formObj.' + confirmObj + '.value');
			if (v != data) {
				//alert('两次输入的内容不一致，请重新输入。');
				feedback(element,"notSame");
				return false;
			}
		} catch (e) {
			feedback(element,'paramError');
			return false;
		}
	}
	//验证数字大小
	var dataBetween = element.attr('dataBetween');
	if (!v.isEmpty() && dataBetween != null) {
		var min = dataBetween.getBetweenVal('min');
		var max = dataBetween.getBetweenVal('max');
		if (min == null || max == null) {
			feedback(element,'paramError');
			return false;
		}
		if (!v.isBetween(parseInt(v.trim()), min, max)) {
			feedback(element,ControlName + '必须是介于 ' + min + '-' + max + ' 之间的数字。');
			return false;
		}
	}
	//验证字符长度
	var dataLength = element.attr('dataLength');
	if (!v.isEmpty() && dataLength != null) {
		var min = dataLength.getBetweenVal('min');
		var max = dataLength.getBetweenVal('max');
		if (min == null || max == null) {
			feedback(element,'paramError');
			return false;
		}
		if (!v.isBetween(v.trim().length, min, max)) {
			feedback(element,ControlName + '必须是 ' + min + '-' + max + ' 个字符。');
			return false;
		}
	}
	return true;
}
$(document).ready(setup);
function setup()
{validator.setup("#form1");}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <table width="800" border="1" cellspacing="0" cellpadding="2" style="font:12px Tahoma">
    <tr>
      <td>密码</td>
      <td>password</td>
      <td><input type="text" name="password" required="required" id="password" controlName="密码" dataType="password" /></td>
    </tr>
    <tr>
      <td>密码确认</td>
      <td>confirmObj</td>
      <td><input type="text" name="confirmObj" controlName="密码确认" confirmObj="#password" /></td>
    </tr>
    <tr>
      <td width="60">英文</td>
      <td width="64">english</td>
      <td width="426"><input type="text" name="english" controlName="英文" dataType="english" dataLength="4,10" />
      4~10个字符</td>
    </tr>
    <tr>
      <td>中文</td>
      <td>chinese</td>
      <td><input type="text" name="chinese" required="required" controlName="中文" />
非空</td>
    </tr>
    <tr>
      <td>数字</td>
      <td>number</td>
      <td><input type="text" name="number" controlName="数字" dataBetween="10,100" />
      大于10，小于100</td>
    </tr>
    <tr>
      <td>整数</td>
      <td>integer</td>
      <td><input type="text" name="integer" controlName="整数" dataType="integer" /></td>
    </tr>
    <tr>
      <td>浮点数</td>
      <td>float</td>
      <td><input type="text" name="float" controlName="浮点数" dataType="float" /></td>
    </tr>
    <tr>
      <td>日期</td>
      <td>date</td>
      <td><input type="text" name="date" controlName="日期" dataType="date" /></td>
    </tr>
    <tr>
      <td>邮件</td>
      <td>email</td>
      <td><input type="text" name="email" controlName="邮件" dataType="email" /></td>
    </tr>
    <tr>
      <td>网址</td>
      <td>url</td>
      <td><input type="text" name="url" controlName="网址" dataType="url" /></td>
    </tr>
    <tr>
      <td>电话</td>
      <td>phone</td>
      <td><input type="text" name="phone" controlName="电话" dataType="phone" /></td>
    </tr>
    <tr>
      <td>手机</td>
      <td>mobile</td>
      <td><input type="text" name="mobile" controlName="手机" dataType="mobile" /></td>
    </tr>
    <tr>
      <td>IP地址</td>
      <td>ip</td>
      <td><input type="text" name="ip" controlName="IP地址" dataType="ip" /></td>
    </tr>
    <tr>
      <td>邮编</td>
      <td>zipcode</td>
      <td><input type="text" name="zipcode" controlName="邮编" dataType="zipcode" /></td>
    </tr>
    <tr>
      <td>QQ号码</td>
      <td>qq</td>
      <td><input type="text" name="qq" controlName="QQ号码" dataType="ip" /></td>
    </tr>
    <tr>
      <td>MSN</td>
      <td>msn</td>
      <td><input type="text" name="msn" controlName="MSN" dataType="msn" /></td>
    </tr>
    <tr>
      <td>身份证</td>
      <td>idcard</td>
      <td><input type="text" name="idcard" controlName="身份证" dataType="idcard" /></td>
    </tr>
    <tr>
      <td colspan="3" align="left"><input type="submit" name="Submit" value=" 提交 " onclick="return validator.validatorAll()" /></td>
    </tr>
  </table>
</form>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 omeweb 于 2008-1-14 17:17 编辑 ]

本帖最近评分记录

帅青蛙威望 +2 谢谢分享 2008-1-15 09:08

http://www.omeweb.com

TOP

aultoale

番茄红了
高级会员

帖子: 943
体力: 648
威望: 16
当前: 广东广州

专长 PHP,Oracle,项目管理

2^# 大中小发表于 2008-1-14 17:32

哈，修改得不错，赞一个。。

http://www.tblog.com.cn

TOP

rokaye

新手上路

帖子: 13
体力: 36
威望: 0
当前: 广东深圳
离线: 4 天

发短消息

3^# 大中小发表于 2008-1-14 17:53

不错收藏了.

TOP

omeweb [楼主]

橘子香水
中级会员

帖子: 430
体力: 378
威望: 5
当前: 广东深圳
离线: 4 天

专长 .NET,C#,MSSQL

4^# 大中小发表于 2008-1-14 17:57

谢谢，我是站在巨人的肩膀上，这个验证只是换了套衣服而已

http://www.omeweb.com

TOP

Lion5859

高级会员

帖子: 252
体力: 546
威望: 0
当前: 广东东莞
离线: 7 天

发短消息

5^# 大中小发表于 2008-1-14 18:53

验证英文时如果输入为空也能通过，浮点数输入整数时也能通过

TOP

omeweb [楼主]

橘子香水
中级会员

帖子: 430
体力: 378
威望: 5
当前: 广东深圳
离线: 4 天

专长 .NET,C#,MSSQL

6^# 大中小发表于 2008-1-15 08:32

回复 #5 Lion5859 的帖子

浮点数输入整数时也能通过是个问题,

验证英文时如果输入为空也能通过是因为这个不是必填项目

http://www.omeweb.com

TOP

子心

网络白痴
金牌会员

帖子: 2167
体力: 3452
威望: 19
当前: 浙江金华

专长 前端制作,CFML,MSSQL

7^# 大中小发表于 2008-1-15 08:37

中文那边可以输入英文。

天也空，地也空，人生渺茫在其中；日也空，月也空，东升西沉为谁功；
田也空，屋也空，换了多少主人翁；金也空，银也空，死后何曾握手中。

TOP

子心

网络白痴
金牌会员

帖子: 2167
体力: 3452
威望: 19
当前: 浙江金华

专长 前端制作,CFML,MSSQL

8^# 大中小发表于 2008-1-15 08:38

qq号码验证提示成了“不是一个有效的IP地址。”

天也空，地也空，人生渺茫在其中；日也空，月也空，东升西沉为谁功；
田也空，屋也空，换了多少主人翁；金也空，银也空，死后何曾握手中。

TOP

omeweb [楼主]

橘子香水
中级会员

帖子: 430
体力: 378
威望: 5
当前: 广东深圳
离线: 4 天

专长 .NET,C#,MSSQL

9^# 大中小发表于 2008-1-15 09:12

回复 #8 子心的帖子

准备修改时论坛提示: 对不起，您的帖子从发表到现在已超过 60 分钟，不能再进行编辑，请返回。

针对这两个问题,已经做了更新，原作者都已经做好了，只是没加上去,我已经加上去了,由于不能更新了,大家见我站内的演示

http://omeweb.com/photo/temp/validator/

可以点这里下载:http://omeweb.com/photo/temp/validator/validator.rar

我又做了更新:

复制内容到剪贴板

代码:

<script language="javascript" type="text/javascript">

$(document).ready(setup);

function setup()

{validator.setup("#form1",null,"ok");}

</script>

上面有3个参数,第一个是必须的，就是验证范围的选择器,第二个就是出错的时候的样式名称,默认为alert,第三个就是通过的时候的样式名称
另外一个更新就是当全部验证时对 input type=button 的做了排除,对 input type=hidden的不予理睬

[ 本帖最后由 omeweb 于 2008-1-15 09:21 编辑 ]

http://www.omeweb.com

TOP

tungvivi

新手上路

帖子: 67
体力: 10
威望: 0
离线: 3 天

发短消息

10^# 大中小发表于 2008-1-15 09:20

开眼界了，非常不错！

TOP

xling

艾克司令
版主

帖子: 2734
体力: 4932
威望: 88
当前: 广东深圳

专长 JS,PHP,Oracle

11^# 大中小发表于 2008-1-15 09:29

看大家讨论的那么热烈,俺也把俺写的验证类发来,供大家参考.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">

</style>
<script language="javascript" type="text/javascript">
String.prototype.trim = function(){
	return this.replace(/(^\s*)|(\s*$)/g, ""); 
}
var FormValidate = {};
(function($){
	var Require = /.+/;
	var Email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
	var Phone = /^(($\d{2,3}$)|(\d{3}\-))?($0\d{2,3}$|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/;
	var Url = /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;
	var QQ = /^[1-9]\d{4,8}$/;
	var Num = "$.$checkNumber('Number',obj,rule)";
	var Int = "$.$checkNumber('Int',obj,rule)";
	var Double = "$.$checkNumber('Double',obj,rule)";
	var English = /^[A-Za-z]+$/;
	var Chinese =  /^[\u0391-\uFFE5]+$/;
	var Username = "$.$checkUsername(obj,rule)";
	var Filter = "$.$doFilter(obj,rule)";
	var Date = "$.$isDate(obj, rule)";
	var Repeat = "$.$repeat(form,obj,rule)";
	var Range = "getAttribute('min') < (value|0) && (value|0) < getAttribute('max')";
	var Compare = "$.$compare(value,getAttribute('operator'),getAttribute('to'))";
	var Custom = "$.$regexp.test(obj.value)";
	var Group = "$.$mustChecked(obj,rule)";
	
	$.onPass = null;
	$.onUnpass = null;
	
	var errList = [];
	
	$.$validate = function(form,rules,mode){
		errList.length = 0;
		
		mode = mode || 1;
		/*----------------------------
		1,全部检查,并alert
		2,一个一个检查，并alert,focus
		3,调用自定义事件 onPassFun验证通过时调用，onUnpassFun未通过时调用。
		----------------------------*/		
		
		var f,rule;
		for(var i=0;i<rules.length;i++){
			rule = rules[i];
			if(rule == undefined) continue;
			
			f = $.$check(form,rule);
			
			if(mode == 2 && f === false){
				alert(rule.msg);
				try{form[rule.name].select();}catch(e){};
				try{
					form[rule.name].focus();
				}catch(e){
					form[rule.name][0].focus();
				}
				return false;
			}else if(mode == 3 && f === true){
				typeof($.onPass) == "function" ? $.onPass(form[rule.name],rule) : null;
			}else if(mode == 3 && f === false){
				$.$addError(rule);
				typeof($.onUnpass) == "function" ? $.onUnpass(form[rule.name],rule) : null;
			}			
		}
		
		if(mode == 1 && errList.length != 0){
			alert($.$errToString());
			return false;
		}else if(mode == 1){
			return true;
		}else if(mode == 3 && errList.length !=0){
			return false;	
		}else if(mode == 3){
			return true;
		}		
	}
	
	
	$.$check = function(form,rule){
		if(typeof rule.name == "string")
			obj = form[rule.name];
		else
			return null;
		
		if(obj == undefined) return null;// Note :not return false!
		//如果不是必填项，radio,checkbox,option可不向下检查。
		//如果不是必填项，除radio,checkbox,option外，如果值为空的话，可不向下检查。
		if(!(rule.required == true || rule.type=="Require") && (obj.length != undefined || obj.value == "")){
			//if(rule.required != true && (obj.length != undefined || obj.value == "")){
			//alert(rule.name + " " + rule.required + " " + obj.length);
			return true;
		}else if(rule.required == true && obj.length == undefined && !eval(Require.test(obj.value.trim()))){
			$.$addError(rule);
			return false;
		}
		
		if(rule.type == undefined && rule.required !== true) return;
		var type = rule.type
		
		switch(type){
			case "Date" :
			case "Repeat" :
			case "Range" :
			case "Compare" :
			case "Custom" :
			case "Group" : 
			case "Limit" :
			case "LimitB" :
			case "SafeString" :
			case "Filter" :
			case "Int":
			case "Double":
			case "Num":
			case "Username":
			case "Repeat":
				if(!eval(eval(type))){
					$.$addError(rule);
					return false;
				}else return true;
				break;
			default :
				if(type && !eval(type).test(obj.value)){
					$.$addError(rule);
					return false;
				}else{
					if(type == "Require" || rule.required == true){
						var min = (typeof rule.min != "number") ? 1 : rule.min;
						var max = (typeof rule.max != "number") ? "" : rule.max;
						var reg = new RegExp("^.{" + min + "," + max + "}$");
						
						//Textarea 换行
						//IE,opera /r
						//FF,Safari /n
						if(reg.test(obj.value.replace(/[\r|\n]/g,"").trim())){
							return true;
						}else{
							$.$addError(rule);
							return false;
						}
					}else
						return true;
				}
				break;
		}
	}
	
	
	$.$isDate = function(obj,rule){
		var r = obj.value.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
		if(r==null) return false;
		var d = new Date(r[1], r[3]-1, r[4]);
		return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);		
	}
	
	
	$.$mustChecked = function(obj,rule){
		var o;
		var min_ = rule.min || 1 ,max_ = rule.max || obj.length;
		
		var cn = 0;
		
		for(var i=0;o = obj[i];i++){
			if(o.checked != undefined){//Radio,CheckBox
				if(o.checked)
					cn++;
			}else{
				var noSelected = rule.noSelected || "";
				if(o.selected && noSelected == o.value) return false;
				else if(o.selected) cn++;
			}
		}
		
		if(cn >= min_ && cn <= max_ ) return true;
		else return false;
	}
	
	
	
	$.$checkNumber = function(type,obj,rule){
		var f;
		switch(type){
			case "Int":
				f =  /^[-\+]?\d+$/.test(obj.value);
				break;
			case "Double":
				f = /^[-\+]?\d+(\.\d+)?$/.test(obj.value);
				break;
			case "Number":
				f = !isNaN(Number(obj.value));
				break;
		}
		
		if(!f) return false;
		
		var min = (typeof rule.min != "number") ? Number.NEGATIVE_INFINITY : rule.min;
		var max = (typeof rule.max != "number") ? Number.POSITIVE_INFINITY : rule.max;
		
		
		//var min = rule.min | Number.NEGATIVE_INFINITY, max = rule.max | Number.POSITIVE_INFINITY;
		// 0 | null = 0   'a' | -2 = -2   -2 | 'a' = -2    'a' | 'a' = 0
		//用这个来判断数字。还可以。
		
		if(obj.value >= min && obj.value <= max)
			return true;
		else
			return false;
	}
	
	
	$.$checkUsername = function(obj,rule){
		var min = rule.min || 3 ,max = rule.max || "";
		var reg = new RegExp("^\\w{" + min + "," + max + "}$","i");
		return reg.test(obj.value);
	}
	
	$.$doFilter = function(obj, rule){
		return new RegExp("^.+\.(?=EXT)(EXT)$".replace(/EXT/g, rule.accept.split(/\s*,\s*/).join("|")), "gi").test(obj.value);
	}
	
	$.$repeat = function(form,obj,rule){
		return form[rule.to].value == obj.value;
	}
	
	$.$addError = function(rule){
		errList.push(rule);
	}
	
	$.$errToString = function(){
		var t = "",rule;
		for(var i=0;rule = errList[i];i++)
			t += (i + 1) + ". " + rule.msg + "\n";
		
		return t;
	}
})(FormValidate)
</script>
</head>
<body>
<form name="testForm" action="?" method="post" enctype="multipart/form-data" onsubmit="return vControl('CHECKFORM',this)">
<div>A：<input type="text" name="a" /></div>
<div>B:<input type="text" name="b"  /></div>
<div>C:<input type="text" name="c" /></div>
<div>D:<input type="text" name="d" /></div>
<div>E:<input type="text" name="e" /></div>
<div>F:<input type="radio" name="f[]" id="radio" value="radio" /><input type="radio" name="f[]" id="radio2" value="radio2" /></div>
<div>
g:
<select id="g" name="g">
	<option></option>
	<option value="a">a</option>
	<option value="b">b</option>
	<option value="c">c</option>
	<option value="d">d</option>
	<option value="e">e</option>
</select>
</div>
<div>H: <input type="file" name="h" id="h" /></div>
<div>I:<input name="i" type="text" /></div>
<div>J:<textarea name="j" id="j" cols="45" rows="5"></textarea></div>
  <input type="submit" name="button" id="button" value="提交1" onclick="mode=1" />
  <input type="submit" name="button2" id="button2" value="提交2" onclick="mode=2" />
  <input type="submit" name="button3" id="button3" value="提交3" onclick="mode=3" />
</form>
</body>
</html>
<script language="javascript" type="text/javascript">
var form = document.forms["testForm"];
var rules = [
	{name:"a",	required:true,		min:5,			msg:"A 是一个必填字段,长度必须大于等于5"},
	{name:"b",	type:"Require",		max:5,			msg:"B是一个必填字段，长度必须小于等于5"},
	{name:"c",	type:"Int",			min:10,			max:20,		msg:"如果填C的话，C必须是一个整数，小于20大于10"},
	{name:"d",	required:true,		type:"Num",		min:-10,	max:10,		msg:"d是一个必选项，其值必须在-10到10之间"},
	{name:"e",	required:true,		type:"Chinese",	msg:"E只能输入汉字"},
	{name:"f[]",type:"Group",		required:true,	msg:"请选择一个F"},
	{name:"g",	type:"Group",		required:true,	noSelected:"a",			msg:"g是一个必选项，其值不能选a"},
	{name:"h",	type:"Filter",		accept:"gif|jpg|png",		msg:"H只接受 gif,jpg,png,可以不填!"},
	{name:"i",	required:true,		type:"Repeat",	to:"a",		msg:"i的值必须等于a的值"},
	{name:"j",	required:true,		min:5,			max:10,		msg:"j是一个必填项,长度在5到10字符之间"}
];
var mode;
var span_ = document.createElement("SPAN");
	span_.className = "error";
FormValidate.onPass = function(obj,rule){
	obj_ = obj.parentNode || obj[obj.length -1].parentNode;
	try{
		obj_.removeChild(obj_.errorTip);
		obj_.errorTip = null
	}catch(e){}
}
FormValidate.onUnpass = function(obj,rule){
	obj_ = obj.parentNode || obj[obj.length -1].parentNode;
	if(!obj_.errorTip){
		obj_.errorTip = span_.cloneNode(true);
		obj_.appendChild(obj_.errorTip);
		obj_.errorTip.innerHTML = rule.msg;
	}
}
function vControl(pChoice,pParm){
	switch(pChoice){
		case "CHECKFORM":
			//Validator.validate(pParm,rules)的效果等同于mode的值为：1
			//如果mode为3时，会执行onPass或onUnpass事件
			f = FormValidate.$validate(pParm,rules,mode);
			if(f===false)
				return false;
			else
				return true;
			break;
	}
}
</script>

提示：您可以先修改部分代码再运行

我向往我美丽的梦，但是美丽的太遥远。。。
求职，有意者请联系。。。

TOP

omeweb [楼主]

橘子香水
中级会员

帖子: 430
体力: 378
威望: 5
当前: 广东深圳
离线: 4 天

专长 .NET,C#,MSSQL

12^# 大中小发表于 2008-1-15 09:41

回复 #11 xling 的帖子

你的结构和代码分离做的很好

http://www.omeweb.com

TOP

lq917

初级会员

帖子: 45
体力: 99
威望: 0
离线: 9 天

发短消息

13^# 大中小发表于 2008-1-15 09:53

数字的验证好像有问题

比如限定为10-100，我输入100.1却通过了。
这点很重要，假如用于库存管理，出库时绝对不能够超过库存量的

TOP

omeweb [楼主]

橘子香水
中级会员

帖子: 430
体力: 378
威望: 5
当前: 广东深圳
离线: 4 天

专长 .NET,C#,MSSQL

14^# 大中小发表于 2008-1-15 10:03

回复 #13 lq917 的帖子

谢谢,演示已经做了更新

http://www.omeweb.com

TOP

fictioner

新手上路

帖子: 2
体力: 4
威望: 0
离线: 99 天

15^# 大中小发表于 2008-4-17 16:20

请问如何在表单检测时不会把radio元素自动去掉了，如何检测是否选择了radio元素？

[img]ftp://61.183.32.148/myee/music.gif[/img][img]ftp://61.183.32.148/myee/mysig.jpg[/img]

TOP

7815480

初级会员

帖子: 131
体力: 196
威望: 2
离线: 99 天

16^# 大中小发表于 2008-4-17 16:34

好好学习了好多!感谢!

www.yulemm.com

TOP

heluyao

的士司机
银牌会员

帖子: 965
体力: 1611
威望: 0
当前: 广东深圳
离线: 1 天

专长 网页设计,前端制作,JS

17^# 大中小发表于 2008-4-26 00:35

不错的东西,有用武之地!

我的小窝，欢迎来坐坐！

TOP

lovelylife

中级会员

帖子: 102
体力: 219
威望: 0
当前: 上海浦东
离线: 3 天

18^# 大中小发表于 2008-4-26 11:30

好东西，值得收藏
这些都是当用户离开某个输入控件才开始进行判断的

有没有一种js写的用户输入的数据不合法不能输入数据，或者对输入的数据立即格式化等等

TOP

番茄的表单验证类-omeweb修改美化版，结合JQ

代码:

回复 #5 Lion5859 的帖子

回复 #8 子心 的帖子

代码:

回复 #11 xling 的帖子

数字的验证好像有问题

回复 #13 lq917 的帖子

回复 #8 子心的帖子