jQuery表单验证插件使用教程

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

第二步,根据你表单要使用的验证方法,在你的表单中加入对应的验证挂钩.比如你想使下面的表单为必填项:

 代码如下 复制代码
<input id="checkempty" />
那么,就给它添加class=”:required”> :
<input id="checkempty" class=":required" />

其他的也依次类推,类似:required的验证钩子,可以在静态页中找到,比如数字是:number,最大值是:max_length;4,当然,你还可以自定义或者修改成你懂的名称.

如果你同一个表单要满足多个条件,比如必填项,且输入字符数在4-8之间,你可以这样写:

 代码如下 复制代码

<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',//验证失败时文字信息的样式

时间: 2024-11-10 01:05:18

jQuery表单验证插件使用教程的相关文章

Yii框架中jquery表单验证插件用法示例_php实例

本文实例讲述了Yii框架中jquery表单验证插件用法.分享给大家供大家参考,具体如下: 运行效果图如下: 视图层: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

Yii框架中jquery表单验证插件用法示例

本文实例讲述了Yii框架中jquery表单验证插件用法.分享给大家供大家参考,具体如下: 运行效果图如下: 视图层: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

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

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

jquery表单验证插件(jquery.validate.js)的3种使用方式

这篇文章主要介绍了jquery表单验证插件(jquery.validate.js)的3种使用方式,本文用详细的代码实例讲解jquery表单验证插件的使用,需要的朋友可以参考下     jquery 验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery 插件和 jquery 验证插件: 第一步:引入插件 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js

JQuery表单验证插件EasyValidator用法分析_jquery

本文实例讲述了JQuery表单验证插件EasyValidator用法.分享给大家供大家参考.具体如下: 本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手. DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以针对不同用户特殊需求,自行写正则吧. EasyValidator实现的功能: 1.提示功能(在表单或者其他标签中加入tip="想提示的文字") 如: 复制代码 代码如下: <inp

jquery表单验证插件(jquery.validate.js)的3种使用方式_jquery

jquery  验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery  插件和 jquery 验证插件: 第一步:引入插件 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jq

jQuery 表单验证插件formValidation实现个性化错误提示_javascript技巧

其效果图如下:使用说明 需要使用jQuery库文件和formValidation库文件[下载实例代码] http://jquery.com/ 同时需要自定义显示提示错误信息的CSS样式 使用实例 一,包含文件部分 复制代码 代码如下: <script src="jquery.js" type="text/javascript"></script> <script src="jquery.validationEngine.js&

jQuery表单验证插件jqBootstrapValidation使用示例

jqBootstrapValidation是一个bootstrap框架样式表单的jQuery验证插件,他能够验证基本的表单字段类型,比如电子邮箱格式.纯数字.纯子母.字段是否为空等,依赖于bootstrap框架的表单样式和Jquery JavaScript框架查找和编辑HTML标签. 安装 下载jqbootstrapvalidation包括你的网页的脚本标签:  代码如下 复制代码 <script src="/js/jquery.min.js"></script>

jQuery表单验证插件总结详解

vanadium.js 如何使用? 第一步,当然是和使用其他jQuery插件一样,引入插件文件vanadium.js; 第二步,根据你表单要使用的验证方法,在你的表单中加入对应的验证挂钩.比如你想使下面的表单为必填项: <input id="checkempty" /> 那么,就给它添加class=":required"> : <input id="checkempty" class=":required&quo