您的位置：首页 > Web前端 > JQuery

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

2014-09-25 08:48 645 查看
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进行中文整理
for="checkempty">请输入Mr.Think(区分大小写):
align="left">id="checkempty" class=":equal;Mr.Think"
/>
for="checkempty">请输入Mr.Think(不区分大小写):
align="left">id="checkempty" class=":equal_ignore_case;Mr.Think"
/>
for="checkempty">输入不能为空:
id="checkempty" class=":required" />
for="checkinteger">输入整数(含负):
id="checkinteger" class=":integer" />
for="checknum">输入数字:
id="checknum" class=":number" />
for="checkfloat">输入非负整数值:
id="checkfloat" class=":digits :required"
/>
for="checkletter">输入字母:
id="checkletter" class=":alpha" />
for="checkletterasc">请在ASC编码下输入字母:
id="checkletterasc" class=":asciialpha" />
for="checkletternum">请输入英文字母或正数:
id="checkletternum" class=":alphanum" />
for="checkmail">请输入邮箱:
id="checkmail" class=":email :required"
/>
for="checkurl">请输入网址:
id="checkurl" class=":url" />
for="checkdate">请输入日期:
id="checkdate" class=":date_au" />
for="checklength">请输入4个字符:
id="checklength" class=":length;4" />
for="checkminlength">最少输入4个字符:
id="checkminlength" class=":min_length;4 :required"
/>
for="checkmaxlength">最多输入4个字符:
id="checkmaxlength" class=":max_length;4"
/>
for="checkmaxmin">最多输入4到8个字符:
id="checkmaxmin" class=":min_length;4 :max_length;8"
/>
for="checkpsw">请输入密码:id="checkpsw" class=":required" type="password" />
for="checkpswrepeat">请再次输入密码:id="checkpswrepeat" class=":same_as;checkpsw"
type="password" />
for="checkvalue">正则匹配:
id="checkvalue" class=":format;/^(Mr.Think)+$/i"
/>
for="checkpass">账号验证:
id="checkpass" class=":ajax;/mrthink.php"
/>此项须连接服务器测试才有效
for="checkaccept">必须接受:
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) {}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航