基于JQUERY的表单验证插件.原作者@…

charset="gbk" />
实用齐全的表单验证程序@原作者Vanadium,由@Mr.Think中文整理@www.MrThink.net
rel="stylesheet" href="http://mrthink.net/demo/css/base.css" />
rel="shortcut icon" type="image/x-icon" href="http://mrthink.net/wp-content/themes/zsofa/favicon.ico" />

rel="pingback" href="http://mrthink.net/xmlrpc.php" />
rel="alternate" type="application/rss+xml" title="Mr.Think的博客 RSS Feed" href="http://mrthink.net/feed/" />
form *{padding:0; margin:0}
form{margin:20px; background:#eee; padding:5px 10px;}
input{margin:0 8px 0 15px; height:20px; line-height:20px;width:200px;}
input[type="submit"]{widows:100px;}
fieldset{padding:10px; border:1px solid #000;}
table{width:100%; border:0; border-collapse:collapse; line-height:30px; margin:10px 0;}
table th{text-align:right; width:20%; font-weight:normal;}
table td span{color:#a40000}
input.rightformcss,select.rightformcss,textarea.rightformcss{border:1px solid green;padding:1px;}
.failmsg{color:#a40000;}
.msgvaluecss{font-style:italic;}
input.failformcss,select.failformcss,textarea.failformcss{border:1px solid #a40000;padding:1px;}
$(function(){
//必填项加红*,Mr.Think添加,原插件无
$("input[class*=:required]").after(" *")
});
//弹出信息样式设置
Vanadium.config = {
valid_class: 'rightformcss',//验证正确时表单样式
invalid_class: 'failformcss',//验证失败时该表单样式
message_value_class: 'msgvaluecss',//这个样式是弹出信息中调用值的样式
advice_class: 'failmsg',//验证失败时文字信息的样式
prefix: ':',
separator: ';',
reset_defer_timeout: 100
}
//验证类型及弹出信息设置
Vanadium.Type = function(className, validationFunction, error_message, message, init) {
this.initialize(className, validationFunction, error_message, message, init);
};
Vanadium.Type.prototype = {
initialize: function(className, validationFunction, error_message, message, init) {
this.className = className;
this.message = message;
this.error_message = error_message;
this.validationFunction = validationFunction;
this.init = init;
},
test: function(value) {
return this.validationFunction.call(this, value);
},
validMessage: function() {
return this.message;
},
invalidMessage: function() {
return this.error_message;
},
toString: function() {
return "className:" + this.className + " message:" + this.message + " error_message:" + this.error_message
},
init: function(parameter) {
if (this.init) {
this.init(parameter);
}
}
};
Vanadium.setupValidatorTypes = function() {
Vanadium.addValidatorType('empty', function(v) {
return ((v == null) || (v.length == 0));
});
//***************************************以下为验证方法,使用时可仅保留用到的判断
Vanadium.addValidatorTypes([
//匹配大小写的等值
['equal', function(v, p) {
return v == p;
}, function (_v, p) {
return '输入的值必须与' + p + '相符\(区分大小写\).'
}],
//不匹配大小写的等值
['equal_ignore_case', function(v, p) {
return v.toLowerCase() == p.toLowerCase();
}, function (_v, p) {
return '输入的值必须与' + p + '相符\(不区分大小写\).'
}],
//是否为空
['required', function(v) {
return !Vanadium.validators_types['empty'].test(v);
}, '此项不可为空!'],
//强制选中
['accept', function(v, _p, e) {
return e.element.checked;
}, '必须接受!'],
//
['integer', function(v) {
if (Vanadium.validators_types['empty'].test(v)) return true;
var f = parseFloat(v);
return (!isNaN(f) && f.toString() == v && Math.round(f) == f);
}, '请输入一个正确的整数值.'],
//数字
['number', function(v) {
return Vanadium.validators_types['empty'].test(v) || (!isNaN(v) && !/^\s+$/.test(v));
}, '请输入一个正确的数字.'],
//
['digits', function(v) {
return Vanadium.validators_types['empty'].test(v) || !/[^\d]/.test(v);
}, '请输入一个非负整数,含0.'],
//只能输入英文字母
['alpha', function (v) {
return Vanadium.validators_types['empty'].test(v) || /^[a-zA-Z\u00C0-\u00FF\u0100-\u017E\u0391-\u03D6]+$/.test(v) //% C0 - FF (? - ?); 100 - 17E (? - ?); 391 - 3D6 (? - ?)
}, '请输入英文字母.'],
//仅限ASCII编码模式下输入英文字母
['asciialpha', function (v) {
return Vanadium.validators_types['empty'].test(v) || /^[a-zA-Z]+$/.test(v) //% C0 - FF (? - ?); 100 - 17E (? - ?); 391 - 3D6 (? - ?)
}, '请在ASCII下输入英文字母.'],
//英文字母或正数
['alphanum', function(v) {
return Vanadium.validators_types['empty'].test(v) || !/\W/.test(v)
}, '请输入英文字母或正数.'],
//邮箱验证
['email', function (v) {
return (Vanadium.validators_types['empty'].test(v) || /\w{1,}[@][\w\-]{1,}([.]([\w\-]{1,})){1,3}$/.test(v))
}, '邮箱格式不正确,请检查.正确格式例如mrthink@gmail.com'],
//网址
['url', function (v) {
return Vanadium.validators_types['empty'].test(v) || /^(http|https|ftp):\/\/(([A-Z0-9][A-Z0-9_-]*)(\.[A-Z0-9][A-Z0-9_-]*)+)(:(\d+))?\/?/i.test(v)
}, '请输入正确的网址,比如:http://www.mrthink.net'],
//日期格式
['date_au', function(v) {
if (Vanadium.validators_types['empty'].test(v)) return true;
var regex = /^(\d{2})\/(\d{2})\/(\d{4})$/;
if (!regex.test(v)) return false;
var d = new Date(v.replace(regex, '$2/$1/$3'));
return ( parseInt(RegExp.$2, 10) == (1 + d.getMonth()) ) && (parseInt(RegExp.$1, 10) == d.getDate()) && (parseInt(RegExp.$3, 10) == d.getFullYear() );
}, '请输入正确的日期格式,比如:28/05/2010.'],
//输入固定长度字符串
['length',
function (v, p) {
if (p === undefined) {
return true
} else {
return v.length == parseInt(p)
}
;
},
function (_v, p) {
return '输入字符长度等于' + p + '个.'
}
],
//
['min_length',
function (v, p) {
if (p === undefined) {
return true
} else {
return v.length >= parseInt(p)
}
;
},
function (_v, p) {
return '输入字符长度不低于' + p + '个.'
}
],
['max_length',
function (v, p) {
if (p === undefined) {
return true
} else {
return v.length <= parseInt(p)
}
;
},
function (_v, p) {
return '输入字符长度不大于' + p + '个.'
}
],
//判断密码是相同
['same_as',
function (v, p) {
if (p === undefined) {
return true
} else {
var exemplar = document.getElementByIdx_x(p);
if (exemplar)
return v == exemplar.value;
else
return false;
}
;
},
function (_v, p) {
var exemplar = document.getElementByIdx_x(p);
if (exemplar)
return '两次密码输入不相同.';
else
return '没有可参考值!'
},
"",
function(validation_instance) {
var exemplar = document.getElementByIdx_x(validation_instance.param);
if (exemplar){
jQuery(exemplar).bind('validate', function(){
jQuery(validation_instance.element).trigger('validate');
});
}
}
],
//ajax判断是否存在值
['ajax',
function (v, p, validation_instance, decoration_context, decoration_callback) {
if (Vanadium.validators_types['empty'].test(v)) return true;
if (decoration_context && decoration_callback) {
jQuery.getJSON(p, {value: v, id: validation_instance.element.id}, function(data) {
decoration_callback.apply(decoration_context, [[data], true]);
});
}
return true;
}]
,
//正则匹配,此用法不甚理解
['format',
function(v, p) {
var params = p.match(/^\/(((\\\/)|[^\/])*)\/(((\\\/)|[^\/])*)$/);
if (params.length == 7) {
var pattern = params[1];
var attributes = params[4];
try
{
var exp = new RegExp(pattern, attributes);
return exp.test(v);
}
catch(err)
{
return false
}
} else {
return false
}
},
function (_v, p) {
var params = p.split('/');
if (params.length == 3 && params[0] == "") {
return '输入的值必须与 ' + p.toString() + ' 相匹配.';
} else {
return '提供的值与' + p.toString() + '不匹配.';
}
}
]
])
if (typeof(VanadiumCustomValidationTypes) !== "undefined" && VanadiumCustomValidationTypes) Vanadium.addValidatorTypes(VanadiumCustomValidationTypes);
};
id="d_head">

title="返回Mr.Think的博客" href="http://mrthink.net/">Mr.Think的博客可自由转载及使用,但请注明出处.

title="订阅Mr.Think的博客" href="http://mrthink.net/feed/">RSS Feed@专注WEB前端技术, 热爱PHP, 崇尚简单生活的凡夫俗子.

class="return"> href="/demo/download/VanadiuFormValidationModifiedforMrThink.7z">点此下载本页DEMO返回文章页: href="http://mrthink.net/jquery-form-validation-plugin/">实用齐全的表单验证程序@原作者Vanadium,由@Mr.Think中文整理@www.MrThink.net
id="demo">
id="iform" name="iform" method="post" action="#">
基于JQUERY的表单验证插件.原作者href="http://vanadiumjs.com/" target="_blank" title="前往原作者网站">@Vanadium,由href="http://mrthink.net/" target="_blank" title="前往Mr.Think的博客">Mr.Think进行中文整理
请输入Mr.Think(区分大小写):
align="left">id="checkempty" class=":equal;Mr.Think" />
请输入Mr.Think(不区分大小写):
align="left">id="checkempty" class=":equal_ignore_case;Mr.Think" />
输入不能为空:
id="checkempty" class=":required" />
输入整数(含负):
id="checkinteger" class=":integer" />
输入数字:
id="checknum" class=":number" />
输入非负整数值:
id="checkfloat" class=":digits :required" />
输入字母:
id="checkletter" class=":alpha" />
请在ASC编码下输入字母:
id="checkletterasc" class=":asciialpha" />
请输入英文字母或正数:
id="checkletternum" class=":alphanum" />
请输入邮箱:
id="checkmail" class=":email :required" />
请输入网址:
id="checkurl" class=":url" />
请输入日期:
id="checkdate" class=":date_au" />
请输入4个字符:
id="checklength" class=":length;4" />
最少输入4个字符:
id="checkminlength" class=":min_length;4 :required" />
最多输入4个字符:
id="checkmaxlength" class=":max_length;4" />
最多输入4到8个字符:
id="checkmaxmin" class=":min_length;4 :max_length;8" />
请输入密码:id="checkpsw" class=":required" type="password" />
请再次输入密码:id="checkpswrepeat" class=":same_as;checkpsw" type="password" />
正则匹配:
id="checkvalue" class=":format;/^(Mr.Think)+$/i" />
账号验证:
id="checkpass" class=":ajax;/mrthink.php" />此项须连接服务器测试才有效
必须接受:
type="checkbox" id="checkaccept" class=":accept" />
type="submit" value="提交表单" style="width:80px; padding:0.2em; height:30px;" />
id="adsense">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(("
try {
var pageTracker = _gat._getTracker("UA-15924173-1");
pageTracker._trackPageview();
} catch(err) {}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值