齐全的jQuery表单验证插件

[ 67398 / 1789 / 28 ]

一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~

可以验证哪些? 文字,日期,邮箱,网址,数字,AJAX用户名验证以及自定义的正则等等几乎所有我们要用到的验证.

如何使用?

第一步,当然是和使用其他jQuery插件一样,引入插件文件vanadium.js;

第二步,根据你表单要使用的验证方法,在你的表单中加入对应的验证挂钩.比如你想使下面的表单为必填项:
  1. <input id="checkempty" />
复制代码
那么,就给它添加class=”:required”> :
  1. <input id="checkempty" class=":required" />
复制代码
其他的也依次类推,类似:required的验证钩子,可以在静态页中找到,比如数字是:number,最大值是:max_length;4,当然,你还可以自定义或者修改成你懂的名称.

如果你同一个表单要满足多个条件,比如必填项,且输入字符数在4-8之间,你可以这样写:
  1. <label for="checkmaxmin">输入4到8个字符:</label></td><td><input id="checkmaxmin"  class=":required :min_length;4 :max_length;8" />
复制代码
明白了吗?用空格隔开条件即可;

第三步,修改弹出信息,比如此项不可为空,你觉得不个性,你可以在判断语句中找到这个字段修改成你觉得个性的.

第四步,删除你用不到的条件判断.保持代码的干净精练,是一种美德.DEMO页面中列出了所有的判断方法,这些判断在现实应用中几乎不可能在同一个表单中用完.所以,删除那些你用不着的判断语句.不删?好吧,那只能证明你很懒,别的没什么影响.

第五步,几个参数说明:

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

DEMO演示:

点此下载DEMO:
附件: 亲,您没有权限下载或查看附件喔:-) 试试登录注册吧!
1

评分次数

    TOP

    深情顶帖,楼主加油!
    TOP

    深情顶帖,楼主加油!
    TOP

    深情顶帖,楼主加油!
    TOP

    深情顶帖,楼主加油!
    TOP

    深情顶帖,楼主加油!
    TOP

    深情顶帖,楼主加油!
    TOP

    正在学习!谢谢!
    TOP

    谢谢你学习中.
    TOP

    支持一下,学习一下

    支持一下,学习一下
    TOP