番茄的表单验证类-omeweb修改美化版，结合JQ
2009-07-03 17:57
423 查看
出自：http://bbs.blueidea.com/thread-2824296-1-1.html
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=$(' <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>
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=$(' <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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html5自带表单验证-美化改造
- JQ---表单验证（用户名、邮箱）
- 解决 NeatUpload 结合 js 验证表单失效
- bootstrap表单验证插件 经验记录 与RSA加密事件配合修改
- jq 表单验证类
- 网上找的一个表单验证类及使用例子(稍微修改了下)
- jq代码学习13---表单验证
- [H5表单]html5自带表单验证体验优化及提示气泡修改
- JQ的表单验证
- Jquery Validate结合QTip实现绚丽的表单验证
- jq操作与验证带fck的表单
- JavaScript基础 submit按钮结合onclick事件 实现表单的提交与验证
- javascript结合正则进行表单验证1
- JQ验证表单
- Jquery Validate结合QTip实现绚丽的表单验证
- jqTransform form表单美化插件使用方法
- 使用ValidForm进行表单验证，结合SpringMVC检验用户名是否存在
- js番茄的表单验证类
- JS+JQ简单的表单失焦验证
- jq登录表单验证