一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~
可以验证哪些? 文字,日期,邮箱,网址,数字,AJAX用户名验证以及自定义的正则等等几乎所有我们要用到的验证.
不多说,看DEMO吧: 点此查看DEMO点此下载DEMO
如何使用?
第一步,当然是和使用其他jQuery插件一样,引入插件文件vanadium.js;
第二步,根据你表单要使用的验证方法,在你的表单中加入对应的验证挂钩.比如你想使下面的表单为必填项:
那么,就给它添加class=”:required”> :
其他的也依次类推,类似:required的验证钩子,可以在静态页中找到,比如数字是:number,最大值是:max_length;4,当然,你还可以自定义或者修改成你懂的名称.
如果你同一个表单要满足多个条件,比如必填项,且输入字符数在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>
共有 57 条评论.发表评论
发表评论[无需注册]
Trackbacks and Pingbacks:
- 区分中英文字符的两种方法: 正则和charCodeAt()方法 | Mr.Think的博客,专注WEB前端技术,热爱PHP,崇尚简单生活 - Pingback on 2010/12/10/ 10:32
- 一款比较实用齐全的jQuery表单验证插件 | Weeego - Pingback on 2012/04/08/ 23:32
验证写的蛮好 我怎么接受到验证过后的返回值了? 我想接收到返回值后再自定义提交
[回复]
有没有可能,通过jquery的addClass(‘:required’)方法,通过点击某个按钮,动态指定某个input 需要验证,或者不需要验证。我已经尝试,好像不行,因为这个js只有在第一次加载页面的时候加载,之后做的class改变好像都不行。不知道你有什么办法不?
[回复]
Mr.Think 回复:
五月 7th, 2012 at 11:56
@转, 尝试重新load一次插件文件试试。
[回复]
这个在ie6下是不支持的吗?那个提交按钮在ie6没有出来是什么原因
[回复]
你好,
我用了你这个验证控件,现在想问下你账号验证这块,服务器返回什么样的数据啊?
我用的asp.net。
谢谢
[回复]
有没有全套封装那种源码,这个太简单了
[回复]
不错,
自己也开发了一个插件Validform,仅需一行代码就能实现验证,网址:validform.rjboy.cn
[回复]
请问手机号码怎么验证~ 是用自定义正则表达式么~ 用正则貌似不成功~ 请指教~
[回复]
Mr.Think 回复:
十二月 22nd, 2011 at 18:17
@dimon, 自定义正则。 /^(1(([35][0-9])|(47)|[8][0126789]))\d{8}$/
[回复]
请教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;
}]
想问一下格式问题 :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
[回复]
这个怎么改成失去焦点的时候再验证呢?
[回复]
Mr.Think 回复:
十二月 8th, 2011 at 20:49
@song, 这个需要修改一下插件源文件,现在是keyup触发的。在vanadium.js中搜索一下keyup,然后修改一下相应的函数。但个人不建议这么做,其实插件的触发方式挺好的。
[回复]
这个插件确实不错,但是我对js一点都不懂,应该如何通过php验证用户名是否存在。
[回复]
最近在做自定义问卷,使用了您做的插件,不过现在有个问题,就是一个组件叫动态组, 在这个组里的input等可以通过添加无限添加。
类似家庭成员 在IE系列下发现
当我第一次点击“添加”按钮后 jquery的html获取的html数据会出现
问题1
<input type=text id=xxx class=":required" name=xxx 3=”<#HaspMapHashkeyPerfix>1″>*
在FF下可以使用,请问怎么解决,谢谢 请尽快回复,可以发我邮箱,谢谢你
[回复]
我的日期格式是2012-08-08这样的 但是你的是2012/08/08 我要怎么改才可以改成我的格式啊
[回复]
怎么验证dropdownlist有没有选择呢?
[回复]
Mr.Think 回复:
六月 12th, 2011 at 12:19
@liu, 暂时没有。但你可以根据自己的需求对插件进行扩展。
[回复]
= =如果表单填写正确的时候出现提示文字 应该怎么改。。。
[回复]
无需验证的字段样式被它搞没了
[回复]
不错.非常感谢分享!
[回复]
都是技术牛人啊,过来支持下哦!
[回复]
如果一个字段有多重验证怎么办,比喻用户注册,要现在验证邮箱的格式是否正确,然后验证邮箱是否被占用。
[回复]
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];
}
]
[回复]
你好,我在动态表单里用到了这个插件,但出现了一个问题,如果我在动态表单里删除了某个元素,这个验证会一直存在,能不能当元素不存在了,就不需要验证?
[回复]
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, 哈 那我就不知道原因了。你可以尝试换一套验证插件试试。
我非常想知道,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, 服务端数据返回的格式,不是前端怎么设置
[回复]
黑鹰 回复:
五月 16th, 2012 at 23:38
String encoding = “utf-8″;
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
request.setCharacterEncoding(encoding);
response.setCharacterEncoding(encoding);
PrintWriter out = response.getWriter();
String userName=request.getParameter(“value”);
if(userName.length()20)
{
return null;
}
String value = this.sysManagerService.checkUserName(userName);
if (value != “” )
{
out.print(“{success:false,message:\”此用户名已存!\”}”);
}
zjfeiye 回复:
八月 9th, 2011 at 16:38
@memory, 同问,看了半天源码也没看出ajax验证的返回格式!
[回复]
15qy 回复:
八月 10th, 2011 at 13:19
@memory, 我也想知道返回值的格式,我写上返回值都为空!如果有一个例子就好了
[回复]
Hi Mr.Think,demo验证中第6个有错如果输入:0123123也可以通过验证
[回复]
Mr.Think 回复:
十一月 26th, 2010 at 08:56
@y, 哦, 感谢指正, 这个应该是非负整数值,包含0,已修正. 请看下判断部分js就明白了.
[回复]
你好,我最近用你这个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的表单验证函数的话应该加哪段呢,我试了好几个都没有反应哦,能帮我看看么,谢谢^_^
[回复]
你好,请问能不能验证输入内容必须为中文?还有输入指定中文就不让提交?
[回复]
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 插件.
如果用图片作为按钮,表单就会直接跳转,而不会停留在当前页面进行判断,请问如何解决?
[回复]
Mr.Think 回复:
八月 10th, 2010 at 15:48
@寂寞梧桐, 为提交按钮写个样式,把图片加在背景中.
[回复]
还不全面。下拉框、单复先框==没有做判断。
[回复]
Mr.Think 回复:
七月 19th, 2010 at 09:34
@jacksuc, 请在判断文件中根据你的实际需求添加删减.
[回复]
jQuery.validation也不错哦!比较老牌的。
[回复]
Mr.Think 回复:
七月 19th, 2010 at 09:33
@1st, 嗯.Validation也是款不错的插件.
[回复]