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

一款比较实用,并且验证类型齐全的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',//验证失败时文字信息的样式

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

共有 122 条评论.

发表评论63,733 Views

  1. 现在不打更待何时 顶多鱼死网破 毕竟他们也心虚 要是等到美国人的胳膊足够长,准备充分之后 还手之力都没了 又只能任人宰割 聚集实力 一举拿下收复越南 击退菲律宾 才是上策 起码可保五十年太平 现在的美国人感觉就想当年的苏联在边境陈兵百万一样

    [回复]

  2. 大家看到的都很片面,其实俄罗斯也不是好东西,霸占中国的领土,现在最关键的是国人自强,现在中国丢失的恰恰是最重要的:那就是爱国主义精神,而失去这个信念的源泉和根本就是国内领导和民众的距离,中国需要战争,倒退的话我希望是文明的倒退,回归到古东方的文明,而不是现在的丑恶。

    [回复]

  3. 积水潭医院的医生态度确实不好,感觉好像是他们淘钱给患者看的病,牛哄哄的,医生不但有医术还要有医德。

    [回复]

  4. 2L蠢材!这时除了和老俄搞好关系,你还能怎样!打仗你去?你打的过人家吗?领导是肯定不会去的!

    [回复]

  5. 1000万的车比10万的更安全……但是我看见满街都是开十万的车的……

    [回复]

  6. 你们一年能坐几次飞机?还是多关心一下陆地交通事故吧。每天出行都会遇到,离我们更近,事故更多,伤亡人数更多。比起飞机,需要我们每个人做到的更多。请每个人先把遵守交通规则重视起来,做好自己吧!

    [回复]

  7. 父母也不是不注意卫生,要是感冒之类的他们知道也不会喂孩子的,不要动不动就是不卫生,那样会让他们觉得你在嫌弃他们

    [回复]

  8. ajax验证:自己写了一个。分享给大家

    //验证用户名或邮箱是否被注册
    ['ajax', function(v, p, e) {
    var result =$.ajax({url:p+"&val="+$(e.element).val(),async:false});
    if (result.responseText==0){
    return true;
    }else
    {
    $(e.element).focus();

    return false;

    }

    }, function (_v, p) {
    if(p.indexOf('account')>-1){
    alert('此用户名已被注册!请更正!')
    return '此用户名已被注册!请更正!';
    }
    if(p.indexOf('email')>-1){
    alert('此邮箱已被注册!请更正!')
    return '此邮箱已被注册!请更正!';
    }
    if(p.indexOf('authCode')>-1){
    alert('验证码错误!请更正!')
    return '验证码错误!请更正!';
    }
    }],

    用法 :ajax;ashx/AjaxValidation.ashx?t=account
    参数t 为验证类型

    ajax返回 0 或 1 0为通过

    [回复]

  9. tuohaibei

    您好,我页面上有个保存数据的submit按钮,当我点击的时候为什么也会执行验证,比如说文本框显示红色,但是我的submit的click事件一样会激发,能不能不激发,或者激发之后再click事件中判断页面文本框有没有验证通过

    [回复]

  10. Ajax的验证没搞成功,希望能有个例子,server 的json什么格式?

    [回复]

  11. 你好,我想请问一下在点击提交按钮验证时不通过执行一个弹出框的函数提醒用户还没正确填写,如果已填写正确就直接提交?

    [回复]

  12. 能否动态添加验证? 比如input默认没有点击按钮时才添加验证

    [回复]

  13. 您好,请问下能否把ajax认证用户名的mrthink.php的源码发一份啊?

    [回复]

  14. 这个代码能给写全点吗 自己弄了1天了 总是出错,刚看到这个非常好 想加上用户名验证
    //用户名是否相同
    ['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];
    }
    ]

    [回复]

    nvloo 回复:

    @nvloo, 希望能得到回复啊。谢谢

    [回复]

  15. 怎么验证KindEditor插件的内容是否为空?

    [回复]

  16. 刚才关于样式的问题自己解决了,但是关于ajax的应用还不清楚,我自定义一个js函数可以验证用户名重复问题,但是这里提供的代码部分没有理解。
    在用户名input后加了一个onblur=”ajax_check_uname(this.value)”
    同时函数书写如下:
    function ajax_check_uname(uname){
    var url = ‘${pageContext.request.contextPath}/servlet/JudgeNameServlet’;
    $.post(url,{value:uname},function(data){
    if(’success’==data){
    //代表验证成功!
    }else{
    //验证失败怎么处理 自己去研究吧
    alert(“用户名重复”);
    }
    });
    }

    对于提供的代码不清楚如何获取服务器传来的数据,也不清楚如何将验证错误提示信息填充到span中
    //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]);
    alert(data);
    });
    }
    return true;
    }]
    这里面,我不清楚参数是什么意思,比如decoration_context, decoration_callback。
    也不清楚decoration_callback.apply(decoration_context, [[data], true]);这句做什么用。
    同时在getJSON中alert也没有得到数据。
    请大牛指点了。3Q

    [回复]

  17. 需要验证的字段有样式,增加这个之后样式就取消掉了,用浏览器的调试工具看,class里面内容变成一个字母一行了。看过您的例子,里面没有自定义样式。。。
    请问,如何在增加样式的同时也加验证啊?

    [回复]

  18. 请教一下,mrthink.php 这个文件应该怎么写呀。谢谢!QQ:1252277305

    [回复]

  19. 恋物语

    咋没看见验证下拉框的?可以把下拉框的也写上吗

    [回复]

  20. 这款插件我倒是用得不错,稍微改了样式,然后加了几组验证的类型。

    [回复]

    恋物语 回复:

    @百分百, 是吗?有下拉框验证的吗

    [回复]

  21. 百度找验证插件来的,感谢博主

    [回复]

  22. 技术啊,技术人才,佩服!

    [回复]

  23. 我想问一下 ajax验证的用户名默认是登入验证 怎么改成注册验证 就是验证不存在的用户名为正确

    [回复]

  24. 验证写的蛮好 我怎么接受到验证过后的返回值了? 我想接收到返回值后再自定义提交

    [回复]

  25. 有没有可能,通过jquery的addClass(‘:required’)方法,通过点击某个按钮,动态指定某个input 需要验证,或者不需要验证。我已经尝试,好像不行,因为这个js只有在第一次加载页面的时候加载,之后做的class改变好像都不行。不知道你有什么办法不?

    [回复]

    Mr.Think 回复:

    @转, 尝试重新load一次插件文件试试。

    [回复]

  26. 这个在ie6下是不支持的吗?那个提交按钮在ie6没有出来是什么原因

    [回复]

  27. 你好,
    我用了你这个验证控件,现在想问下你账号验证这块,服务器返回什么样的数据啊?

    我用的asp.net。

    谢谢

    [回复]

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

    [回复]

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

    [回复]

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

    [回复]

    Mr.Think 回复:

    @dimon, 自定义正则。 /^(1(([35][0-9])|(47)|[8][0126789]))\d{8}$/

    [回复]

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

    [回复]

    Mr.Think 回复:

    @jevons,比如 :ajax;/usermail/usermail.json

    [回复]

    jevons 回复:

    @Mr.Think,
    usermail/usermail.json 里面的内容呢 我根据 官网上面的返回一个 {
    validation_failed:
    {
    email:
    [{
    success: false,
    message: "This is not vaid email."
    }]
    }
    }
    无效,拜托了

    [回复]

    Mr.Think 回复:

    @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;
    }]

  32. benniuniu

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

    [回复]

    Mr.Think 回复:

    @benniuniu, 在class中加入判断参数,:min_length;6 分号后面的6即代表最小长度为6个字条。同时也可以在后面加多个参数,比如:required :min_length;4 :max_length;8

    [回复]

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

    [回复]

    Mr.Think 回复:

    @song, 这个需要修改一下插件源文件,现在是keyup触发的。在vanadium.js中搜索一下keyup,然后修改一下相应的函数。但个人不建议这么做,其实插件的触发方式挺好的。

    [回复]

  34. 罗小东

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

    [回复]

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

    问题1

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

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

    [回复]

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

    [回复]

  37. 怎么验证dropdownlist有没有选择呢?

    [回复]

    Mr.Think 回复:

    @liu, 暂时没有。但你可以根据自己的需求对插件进行扩展。

    [回复]

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

    [回复]

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

    [回复]

  40. 不错.非常感谢分享!

    [回复]

  41. 都是技术牛人啊,过来支持下哦!

    [回复]

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

    [回复]

    Mr.Think 回复:

    @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];
    }
    ]

    [回复]

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

    [回复]

    Mr.Think 回复:

    @cqufo, 原则上是不行的。vanadium是根据原文档DOM绑定判断的。你试试livequery

    [回复]

    cqufo 回复:

    @Mr.Think, 用livequery试了下,但还是没有反应,不知道是不是我调用方法错了

    [回复]

    Mr.Think 回复:

    @cqufo, 哈 那我就不知道原因了。你可以尝试换一套验证插件试试。

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

    [回复]

    Mr.Think 回复:

    @memory, 样例: <input type=”text” name=”usermail” class=”:ajax;/ajaxtest/usermail.json” /> .若还不明白可前往: http://www.vanadiumjs.com/看下原文介绍.

    [回复]

    Yopoing 回复:

    @Mr.Think, 服务端数据返回的格式,不是前端怎么设置

    [回复]

    黑鹰 回复:

    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 回复:

    @memory, 同问,看了半天源码也没看出ajax验证的返回格式!

    [回复]

    15qy 回复:

    @memory, 我也想知道返回值的格式,我写上返回值都为空!如果有一个例子就好了

    [回复]

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

    [回复]

    Mr.Think 回复:

    @y, 哦, 感谢指正, 这个应该是非负整数值,包含0,已修正. 请看下判断部分js就明白了.

    [回复]

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

    [回复]

    Mr.Think 回复:

    @elkan, submit已封装在插件中,不需要你再在form中加入验证函数.

    [回复]

    elkan 回复:

    @Mr.Think, 嗯,我看过vanadium.js后知道它里面有这么一个方法,可现在的问题是我的表单在提交时无法验证,而在单击输入框时又是可以验证的,对于这个我就不清楚问题出在哪里了。

    [回复]

    Mr.Think 回复:

    @elkan, 查一下submit是否被你其他js占用了, 或者表单类型是否正确. 用firebug断点一下.

    elkan 回复:

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

    [回复]

  47. 好好活着

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

    [回复]

    Mr.Think 回复:

    @你好, 请参考DEMO演示第一第二列.

    [回复]

    好好活着 回复:

    @Mr.Think, 谢谢回复,不过我的意思是,我现在的留言本,有人老发垃圾信息,我现在想限制他在姓名一栏必须填中文,在内容里如果包含“某某某”就不让提交,(内容这是使用的FCKeditor编辑器)请问能实现吗?我看第一和第二是限制必须填写预设的内容,我想要的不是这个

    [回复]

    Mr.Think 回复:

    @好好活着, 此插件暂无定义这种方法. 如果想限制仅输入中文可用正则/[^\x00-\xff]/或者charCodeAt()方法判断(如果charCodeAt值大于255即为中文).
    如果你用的也是wp的话,可以用组合使用 Some Chinese Please 与 Akismet 插件.

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

    [回复]

    Mr.Think 回复:

    @寂寞梧桐, 为提交按钮写个样式,把图片加在背景中.

    [回复]

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

    [回复]

    Mr.Think 回复:

    @jacksuc, 请在判断文件中根据你的实际需求添加删减.

    [回复]

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

    [回复]

    Mr.Think 回复:

    @1st, 嗯.Validation也是款不错的插件.

    [回复]

发表评论[无需注册]


渔夫科技