一款比较实用齐全的jQuery表单验证插件

Posted by Mr.Think on 07/16/2010 分类于@jQuery

一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~
可以验证哪些? 文字,日期,邮箱,网址,数字,AJAX用户名验证以及自定义的正则等等几乎所有我们要用到的验证.
不多说,看DEMO吧: 点此查看DEMO点此下载DEMO
如何使用?
第一步,当然是和使用其他jQuery插件一样,引入插件文件vanadium.js;
第二步,根据你表单要使用的验证方法,在你的表单中加入对应的验证挂钩.比如你想使下面的表单为必填项:

那么,就给它添加class=”:required”> :

其他的也依次类推,类似:required的验证钩子,可以在静态页中找到,比如数字是:number,最大值是:max_length;4,当然,你还可以自定义或者修改成你懂的名称.
如果你同一个表单要满足多个条件,比如必填项,且输入字符数在4-8之间,你可以这样写:

输入4到8个字符:

明白了吗?用空格隔开条件即可;
第三步,修改弹出信息,比如此项不可为空,你觉得不个性,你可以在判断语句中找到这个字段修改成你觉得个性的.
第四步,删除你用不到的条件判断.保持代码的干净精练,是一种美德.DEMO页面中列出了所有的判断方法,这些判断在现实应用中几乎不可能在同一个表单中用完.所以,删除那些你用不着的判断语句.不删?好吧,那只能证明你很懒,别的没什么影响.
第五步,几个参数说明:

valid_class: 'rightformcss',//验证正确时表单样式
invalid_class: 'failformcss',//验证失败时该表单样式
message_value_class: 'msgvaluecss',//这个样式是弹出信息中调用值的样式
advice_class: 'failmsg',//验证失败时文字信息的样式

哦?就这么简单,没其他好说的了,使用时请看我写的注释.

可自由转载及使用,但请注明出处!

转载自 <a href="http://mrthink.net/jquery-form-validation-plugin/" title="一款比较实用齐全的jQuery表单验证插件" rel="bookmark">一款比较实用齐全的jQuery表单验证插件@Mr.Think</a>

共有 50 条评论.

发表评论17,537 Views

放众博客 02/02/2012于19:21

有没有全套封装那种源码，这个太简单了

[回复]
haiercdboy 02/02/2012于13:41

不错，
自己也开发了一个插件Validform，仅需一行代码就能实现验证，网址：validform.rjboy.cn

[回复]
dimon 12/22/2011于16:07

请问手机号码怎么验证~ 是用自定义正则表达式么~ 用正则貌似不成功~ 请指教~

[回复]
Mr.Think 回复:
十二月 22nd, 2011 at 18:17
@dimon, 自定义正则。 /^(1(([35][0-9])|(47)|[8][0126789]))\d{8}$/

[回复]
jevons 12/16/2011于09:45

请教Mr.Think，ajax 的返回值应该是怎么样的，搞了好久都没成功

[回复]
Mr.Think 回复:
十二月 16th, 2011 at 09:53
@jevons,比如 :ajax;/usermail/usermail.json

[回复]
jevons 回复:
十二月 16th, 2011 at 11:35
@Mr.Think,
usermail/usermail.json 里面的内容呢我根据官网上面的返回一个 {
validation_failed:
{
email:
[{
success: false,
message: "This is not vaid email."
}]
}
}
无效，拜托了

[回复]
Mr.Think 回复:
十二月 16th, 2011 at 14:13
@jevons, 写法MS没错，实在不行，你将这一块用独立的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;
}]
benniuniu 12/11/2011于21:17

想问一下格式问题 :min_length;6 是不是分号隔开是参数后面能不能跟多个参数
比如 :min_length;6;a1;b1 这样到时候在处理某个验证的函数体 function (v, p, p2, p3) 这样收到参数吗？这块的定义有说明吗，谢谢~~

[回复]
Mr.Think 回复:
十二月 12th, 2011 at 16:18
@benniuniu, 在class中加入判断参数，:min_length;6 分号后面的6即代表最小长度为6个字条。同时也可以在后面加多个参数，比如:required :min_length;4 :max_length;8

[回复]
song 12/05/2011于10:27

这个怎么改成失去焦点的时候再验证呢？

[回复]
Mr.Think 回复:
十二月 8th, 2011 at 20:49
@song, 这个需要修改一下插件源文件，现在是keyup触发的。在vanadium.js中搜索一下keyup，然后修改一下相应的函数。但个人不建议这么做，其实插件的触发方式挺好的。

[回复]
罗小东 11/12/2011于22:25

这个插件确实不错，但是我对js一点都不懂，应该如何通过php验证用户名是否存在。

[回复]
rookie 10/10/2011于11:24

最近在做自定义问卷，使用了您做的插件，不过现在有个问题，就是一个组件叫动态组，在这个组里的input等可以通过添加无限添加。
类似家庭成员在IE系列下发现
当我第一次点击“添加”按钮后 jquery的html获取的html数据会出现

问题1

<input type=text id=xxx class=":required" name=xxx 3=”<#HaspMapHashkeyPerfix>1″>*

在FF下可以使用，请问怎么解决，谢谢请尽快回复，可以发我邮箱，谢谢你

[回复]
dff 07/13/2011于10:20

我的日期格式是2012-08-08这样的但是你的是2012/08/08 我要怎么改才可以改成我的格式啊

[回复]
liu 06/10/2011于10:57

怎么验证dropdownlist有没有选择呢？

[回复]
Mr.Think 回复:
六月 12th, 2011 at 12:19
@liu, 暂时没有。但你可以根据自己的需求对插件进行扩展。

[回复]
oSEEDo 06/08/2011于11:08

= =如果表单填写正确的时候出现提示文字应该怎么改。。。

[回复]
wqer 06/04/2011于22:16

无需验证的字段样式被它搞没了

[回复]
liao 05/19/2011于14:02

不错.非常感谢分享!

[回复]
牛尔官网 05/13/2011于17:37

都是技术牛人啊，过来支持下哦！

[回复]
gentmomo 04/13/2011于16:59

如果一个字段有多重验证怎么办，比喻用户注册，要现在验证邮箱的格式是否正确，然后验证邮箱是否被占用。

[回复]
Mr.Think 回复:
四月 13th, 2011 at 19:08
@gentmomo, 可以自己扩展，比如：
//用户名是否相同
['validate',
function (v, p) {
var flag=$.ajax({
type:'GET',
url:p.split(':')[1],
data:{value:v},
success:function(msg){
$.noop;
},
async:false
}).responseText;
if(flag==0){
return false;
}else{
return true
};
},
function (_v, p) {
return p.split(‘:’)[0];
}
]

[回复]
cqufo 04/02/2011于20:55

你好，我在动态表单里用到了这个插件，但出现了一个问题，如果我在动态表单里删除了某个元素，这个验证会一直存在，能不能当元素不存在了，就不需要验证？

[回复]
Mr.Think 回复:
四月 5th, 2011 at 12:39
@cqufo, 原则上是不行的。vanadium是根据原文档DOM绑定判断的。你试试livequery

[回复]
cqufo 回复:
四月 21st, 2011 at 22:22
@Mr.Think, 用livequery试了下，但还是没有反应，不知道是不是我调用方法错了

[回复]
Mr.Think 回复:
四月 23rd, 2011 at 22:29
@cqufo, 哈那我就不知道原因了。你可以尝试换一套验证插件试试。
memory 02/21/2011于14:40

我非常想知道，ajax服务器端的信息要如何设置…

[回复]
Mr.Think 回复:
二月 21st, 2011 at 17:04
@memory, 样例: <input type=”text” name=”usermail” class=”:ajax;/ajaxtest/usermail.json” /> .若还不明白可前往: http://www.vanadiumjs.com/看下原文介绍.

[回复]
Yopoing 回复:
十二月 7th, 2011 at 15:09
@Mr.Think, 服务端数据返回的格式，不是前端怎么设置

[回复]
zjfeiye 回复:
八月 9th, 2011 at 16:38
@memory, 同问，看了半天源码也没看出ajax验证的返回格式！

[回复]
15qy 回复:
八月 10th, 2011 at 13:19
@memory, 我也想知道返回值的格式，我写上返回值都为空！如果有一个例子就好了

[回复]
y 11/25/2010于21:20

Hi Mr.Think,demo验证中第6个有错如果输入：0123123也可以通过验证

[回复]
Mr.Think 回复:
十一月 26th, 2010 at 08:56
@y, 哦, 感谢指正, 这个应该是非负整数值,包含0,已修正. 请看下判断部分js就明白了.

[回复]
elkan 10/26/2010于00:25

你好，我最近用你这个plugin和strut1的标签做前台的js表单验证，通常表单的验证都是在form的onsubmit或是submit的onclick中加入验证函数，可我在你的DEMO中并未找到相关的代码，嗯，所以我现在的表单是无法验证的，不过它的键盘事件监听又可以验证，但是表单仍是可以提交的，能给我说说问题出现在哪么？谢谢

[回复]
Mr.Think 回复:
十月 26th, 2010 at 11:41
@elkan, submit已封装在插件中,不需要你再在form中加入验证函数.

[回复]
elkan 回复:
十月 26th, 2010 at 12:56
@Mr.Think, 嗯，我看过vanadium.js后知道它里面有这么一个方法，可现在的问题是我的表单在提交时无法验证，而在单击输入框时又是可以验证的，对于这个我就不清楚问题出在哪里了。

[回复]
Mr.Think 回复:
十月 26th, 2010 at 16:57
@elkan, 查一下submit是否被你其他js占用了, 或者表单类型是否正确. 用firebug断点一下.

elkan 回复:
十月 29th, 2010 at 10:49
@Mr.Think, 嗯，你说的对，那个SUBMIT确实是被其它JS占用了，因为我用了另外一款JQUERY插件pico-button来美化按钮效果，它里面有执行form的submit方法。如果我现在想在那个按钮美化插件中加入vanadium.js的表单验证函数的话应该加哪段呢，我试了好几个都没有反应哦，能帮我看看么，谢谢^_^

[回复]
好好活着 10/05/2010于21:49

你好，请问能不能验证输入内容必须为中文？还有输入指定中文就不让提交？

[回复]
Mr.Think 回复:
十月 6th, 2010 at 07:54
@你好, 请参考DEMO演示第一第二列.

[回复]
好好活着回复:
十月 7th, 2010 at 00:07
@Mr.Think, 谢谢回复，不过我的意思是，我现在的留言本，有人老发垃圾信息，我现在想限制他在姓名一栏必须填中文，在内容里如果包含“某某某”就不让提交，（内容这是使用的FCKeditor编辑器）请问能实现吗？我看第一和第二是限制必须填写预设的内容，我想要的不是这个

[回复]
Mr.Think 回复:
十月 7th, 2010 at 11:03
@好好活着, 此插件暂无定义这种方法. 如果想限制仅输入中文可用正则/[^\x00-\xff]/或者charCodeAt()方法判断(如果charCodeAt值大于255即为中文).
如果你用的也是wp的话,可以用组合使用 Some Chinese Please 与 Akismet 插件.
寂寞梧桐 08/10/2010于12:35

如果用图片作为按钮，表单就会直接跳转，而不会停留在当前页面进行判断，请问如何解决？

[回复]
Mr.Think 回复:
八月 10th, 2010 at 15:48
@寂寞梧桐, 为提交按钮写个样式,把图片加在背景中.

[回复]
jacksuc 07/19/2010于01:15

还不全面。下拉框、单复先框==没有做判断。

[回复]
Mr.Think 回复:
七月 19th, 2010 at 09:34
@jacksuc, 请在判断文件中根据你的实际需求添加删减.

[回复]
1st 07/19/2010于00:45

jQuery.validation也不错哦！比较老牌的。

[回复]
Mr.Think 回复:
七月 19th, 2010 at 09:33
@1st, 嗯.Validation也是款不错的插件.

[回复]