番茄的表单验证类-omeweb修改美化版，结合JQ [复制链接]

omeweb　楼主

橘子香水

高级会员

帖子: 557
体力: 969
威望: 5
居住地: 福建省福州市

发表于 2008-1-14 17:10:14 |显示全部楼层

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

我修改的
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还没下载下来。

代码是：

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 编辑 ]

已有 1 人评分	威望	收起理由
帅青蛙	+ 2	谢谢分享

总评分: 威望 + 2 查看全部评分

xml5

		自动登录	找回密码
密码			注册

番茄的表单验证类-omeweb修改美化版，结合JQ [复制链接]

回复 #5 Lion5859 的帖子

回复 #8 子心 的帖子

回复 #11 xling 的帖子

数字的验证好像有问题

回复 #13 lq917 的帖子

浏览过的帖子

浏览过的版块

回复 #8 子心的帖子