`
varsoft
  • 浏览: 2508288 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

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

阅读更多

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

<input id="checkempty" />

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

<input id="checkempty" class=":required" />

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

<label for="checkmaxmin">输入48个字符:</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',//验证失败时文字信息的样式

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

分享到:
评论

相关推荐

    jquery表单验证插件

    ### jQuery表单验证插件详解 #### 一、概述 jQuery表单验证插件是一种用于简化Web表单处理过程的强大工具。它不仅能够帮助开发者轻松地实现表单数据的Ajax提交,还支持文件上传等功能,极大地提升了用户体验并降低...

    一款实用的jquery表单验证插件webluker.zip

    **jQuery Webluker表单验证插件** jQuery Webluker是一款强大的JavaScript库,专为简化和增强网页中的表单验证而设计。它利用jQuery的灵活性和广泛支持,为开发者提供了一种快速、有效的方式来确保用户输入的数据...

    实用的jQuery表单验证代码.rar_实用的jQuery表单验证代码

    通过学习和应用“实用的jQuery表单验证代码”,开发者能够更好地理解和实践上述知识点,构建出具有交互性与用户体验俱佳的表单验证功能。同时,该代码作为一个实例,有助于加深对jQuery及其在表单验证中应用的理解,...

    jQuery formValidator表单验证插件示例源码

    jQuery formValidator是一款强大的JavaScript表单验证插件,它基于jQuery库,用于在用户提交表单前验证输入数据的正确性和格式。这个插件提供了一系列灵活的验证规则和自定义选项,使得开发者能够轻松地实现复杂的...

    bootstrapvalidator是一款简单实用的Bootstrap3表单验证jQuery插件

    BootstrapValidator是针对Bootstrap3框架的一款高效且易于使用的jQuery表单验证插件,它极大地简化了在Web应用中实现复杂表单验证的过程。这款插件利用HTML5的数据属性(data attributes)来设定验证规则,使得...

    Jquery表单验证特效示例

    1. **基本概念**:jQuery表单验证的核心是通过监听用户的交互行为,如表单提交或输入字段失去焦点时,检查输入数据是否符合预设规则。这些规则可能包括必填项、邮箱格式、手机号码格式等。 2. **jQuery验证插件**:...

    通用表单验证Jquery插件.rar

    在Web设计中,用户体验是一个重要的考量因素,一个良好的表单验证插件不仅可以确保数据正确性,还能以用户友好的方式提供反馈。 压缩包中的"A5js477"可能是插件的主文件或者是一系列相关文件的目录。通常,Jquery...

    最新实用的Validate通用表单验证Jquery插件

    【最新实用的Validate通用表单验证Jquery插件】是一个高效、灵活的前端验证工具,专为使用Jquery框架的Web开发人员设计。这个插件极大地简化了表单验证的过程,使得用户输入的数据在提交前就能得到有效的检查,从而...

    简单实用的jQuery表单输入框浮动标签动画特效插件

    - **验证逻辑**:结合表单验证插件,可以在用户输入不合法时显示错误提示,增强用户体验。 总之,"简单实用的jQuery表单输入框浮动标签动画特效插件"为开发者提供了一种便捷的方式,用以提升表单的交互性和吸引力。...

    转 推荐一个超级简单的JQuery表单验证插件EasyValidator

    总的来说,EasyValidator是一个非常实用的JQuery表单验证插件,尤其适合那些不希望在验证逻辑上花费过多时间的开发者。通过其直观的API和丰富的内置规则,我们可以快速构建出功能完善的表单验证系统,从而提升用户...

    jQuery表单验证+日期插件

    在这个主题中,我们关注的是jQuery在表单验证和日期处理方面的应用,具体涉及到"jQuery formValidator"表单验证插件和"jQuery datepicker"日期插件。 1. **jQuery formValidator**: - 表单验证是任何网站中必不可...

    jquery表单验证插件jquery.form.js.pdf

    从提供的文件信息中,我们可以抽取出关于jquery表单验证插件jquery.form.js的知识点,包括其使用方法、功能和相关API介绍等。 首先,jquery.form.js是一个专门用于处理表单的jQuery插件,它提供了简化AJAX表单提交...

    jquery插件-表单验证 根据focus blur

    总的来说,这个压缩包提供了一个实用的jQuery表单验证解决方案,它利用`focus`和`blur`事件进行实时验证,帮助开发者创建更加健壮和用户友好的表单交互体验。通过学习和实践,你可以掌握如何根据自己的需求定制验证...

    jquery表单验证插件validationEngine---个人修改

    **jQuery表单验证插件ValidationEngine详解** 在Web开发中,表单验证是必不可少的一环,它能够确保用户输入的数据符合预设的规则,从而提高数据的准确性和系统的稳定性。ValidationEngine是一款基于jQuery的强大的...

    jQuery 表单验证扩展(三)

    根据提供的文件信息,下面我将详细介绍关于jQuery表单验证中输入文本内容范围验证的相关知识点。...随着技术的不断更新,我们可以期待jQuery表单验证插件会持续改进,为开发者提供更多实用的功能。

    简洁实用的jQuery表单验证代码.zip

    在前端开发中,表单验证...总之,这个"简洁实用的jQuery表单验证代码"可能包括了上述的一些或全部技术,为开发者提供了一个快速集成的验证框架。通过学习和理解这些概念,你可以创建更加健壮和友好的前端表单验证系统。

    jQuery制作动态表单验证代码插件

    6. `js` - 这个目录很可能包含了项目的JavaScript文件,包括jQuery库和其他自定义脚本,如表单验证插件的实现。 为了实现这个动态验证插件,我们需要编写JavaScript代码来定义验证规则,处理用户输入事件,以及展示...

Global site tag (gtag.js) - Google Analytics