jValidate 基于jQuery的表单验证插件

网上的各类表单验证插件的验证规则都是写在脚本里的，但我的插件的验证规则却是写在表单元素的属性里的。如下面的例子：


代码如下:

<input name="name" type="text" id="name" size="30" jvpattern="^.+$" jverrortip="请输入正确的姓名." jvtipid="spt_name" jvmethod="checkname" />
<span id="spt_name" class="normaltips" jverrorclass="errortips" jvcorrectclass="correcttips"></span>

注意看上面代码中以“jv“开头的各种属性名，这些都是表单验证插件需要用的属性值。其中各属性代表的意思请阅读以下表：

1、form表格控件元素可使用的属性：





























属性名 说明
jvpattern 用来验证控件值是否正确的正则表达式。（可不定义此属性)
jvcompareid 需要与当前控件进行值相等比较的其它控件id。（可不定义此属性)
jvrequired 表明当前控件值是否是必须的，也即是否允许当前控件值为空。如不定义此属性则默认为不可空，如果值为false或0则允许为空。（可不定义此属性)
jvmethod

定义需要进行额外验证的方法。（可不定义此属性)

此属性值如果定义，则不需要输写“括号”，并且函数原型为：

xx function(item){

//代码

//true表示验证成功，false表示验证失败。

return true/false;

//或者带错误消息的返回

return {result:true/false, message:'错误消息'};

}

其中item参数是当前控件对象的jQuery实例。

jvtipid

显示验证提示信息的控件id。（可不定义此属性)

注：如果不定义此属性，并且未定义onerror或oncorrect函数则默认为alert提示

jverrortip 当验证失败时要显示的提示信息。（可不定义此属性)
jvcorrecttip 当验证成功时要显示的提示信息。（可不定义此属性)
jvfocuson 当验证失败后是否需要将光标移到控件上。（可不定义此属性)

控件上必须定义：jvpattern、jvmethod、jvcompareid 三者之中的一个或多个，否则插件将不对对应的控件进行验证。

2、tip提示控件元素可使用的属性：tip提示控件即是某个表单控件jvtipid指定的控件。














属性名 说明
jvnormalclass 正常情况下显示提示信息时采用的css样式的classname。（可不定义此属性)
jvcorrectclass 验证成功后显示提示信息时采用的css样式的classname。（可不定义此属性)
jverrorclass 验证失败后显示提示信息时采用的css样式的classname。（可不定义此属性)

当控件规则设置好后就可以直接激活调用jValidate，以便当表单进行submit提交前，进行验证检查。

示例：

$('form').jValidate();

或者带参数的调用：

$('form').jValidate({
blurvalidate : true,
isbubble : false,
onerror : function(item,form){
$.jMessageBox.show('错误', item.attr('jverrortip'));
}
});

可设置的参数请阅读下表：




















参数名 说明
isbubble

是否允许“冒泡”，也即是否允许逐个检查各控件值，如果值为true，则会逐一检查验证所有已设置验证规则的控件；如果值为false则当有一个控件值验证失败（不符合条件）后，将退出后续控件的检查。默认值为false

注：如果提示信息是以弹出窗口方式显示的，建议将此值设置为false，以免一下子弹出较多提示，引起用户反感。

blurvalidate 设置当个个控件失去焦点后是否需要即时检查验证。默认值为false。
emptytip 是否允许空提示。也即是当没有提示信息可显示时，是否还允许提示控件改变css类。默认值为false
oncorrect

当控件值验证成功时调用处理的方法，如果未定义则采用默认行为。函数原型：

function(item, form){

//代码

}

其中参数item: 表示当前控件的jQuery实例; form : 表示控件所在的表单实例

onerror

当控件值验证失败时调用处理的方法，如果未定义则采用默认行为。函数原型：

function(item, form){

//代码

}

其中参数item: 表示当前控件的jQuery实例; form : 表示控件所在的表单实例

示例截图：


源码下载 压缩包附带jMessageBox示例
http://www.jb51.net/jiaoben/23094.html

赞 (0)

相关推荐

  • Jquery插件 easyUI属性汇总

    此属性列表请对照jQuery EasyUI 1.0.5,关于它的更多资讯请猛击这里. 属性分为CSS片段和JS片段. CSS类定义:1.div easyui-window        生成一个window窗口样式.      属性如下:                   1)modal:是否生成模态窗口.true[是] false[否]                   2)shadow:是否显示窗口阴影.true[显示] false[不显示] 2.div easyui-panel    

  • jQuery validate插件功能与用法详解

    jQuery validate插件功能与用法详解

    本文实例讲述了jQuery validate插件功能与用法.分享给大家供大家参考,具体如下: 前言:对于表单内容格式的验证,原生JS的写法,较为繁琐,笔者曾在写一个注册界面的时候,验证邮箱格式,用户名格式,密码格式,多处使用了正则,并且错误提示信息也要用display:none/显示隐藏,在用过jQuery validate插件后,则大大加快了开发速度! 1.jQuery validate插件提供了强大的验证功能,jQuery validate插件的官网是http://jqueryvalidat

  • jQuery插件Validate实现自定义表单验证

    jQuery插件Validate实现自定义表单验证

    本文实例讲解了jQuery Validate 表单验证插件,如何自定义一个验证方法,分享给大家供大家参考,具体内容如下 效果如下: 验证失败效果: 验证成功效果: 具体步骤: 1.引入依赖包 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script src="lib/jquery.validate.js"

  • JQuery扩展插件Validate 5添加自定义验证方法

    JQuery扩展插件Validate 5添加自定义验证方法

    示例如下: 复制代码 代码如下: <script type="text/javascript"> jQuery.validator.addMethod("regex", //addMethod第1个参数:方法名称 function(value, element, params) { //addMethod第2个参数:验证方法,参数(被验证元素的值,被验证元素,参数) var exp = new RegExp(params); //实例化正则对象,参数为传

  • jQuery Dialog 弹出层对话框插件

    原理很简单,通过JS动态构建一个div层,将其插入到body中,然后通过调整position的CSS属性为absolute或fixed,使其脱离原来的文档流的位置.再通过适当的加工美化就成了. 复制代码 代码如下: <!-- 背景遮盖层 --> <div class="dialog-overlay"></div> <!-- 对话框 --> <div class="dialog"> <div class

  • jQuery验证插件 Validate详解

    jQuery验证插件 Validate详解

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

  • 分享20多个很棒的jQuery 文件上传插件或教程

    分享20多个很棒的jQuery 文件上传插件或教程

    1. Plupload Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度.图像自动缩略和上传分块.可同时上传多个文件. 2. The KillersAjax Upload 该插件使用 XHR 用于上传多个文件,支持上传进度显示,但不支持 IE 3. SWFUpload jQuery Plugin 4. AjaxFileUpload 5. Uploadify Uploadify简单说来,是基于Jquery的一款文件上传插件.它的功能特色总结如下: 支持单文件或多文件上

  • Jquery插件之多图片异步上传

    Jquery插件之多图片异步上传

    1.初始化上传控件数量. 复制代码 代码如下: $(document).ready(function() { $('#H_File').uploadFile({ key: 'test',count:3 }); }); 以前的设计思想是,初始化上传控件数量,页面显示为1个上传控件,每当上传成功后,在下面创建一个上传控件. 2.上传图片成功后 这就是最终的效果,如果您有更好的插件,希望一起开源. 其他的就不多说了,如果您感兴趣,点击下载源码 /201010/yuanma/jquery_aspnet_

  • JQuery扩展插件Validate—6 radio、checkbox、select的验证

    JQuery扩展插件Validate—6 radio、checkbox、select的验证

    效果如下所示: 解决这个问题的办法是将错误信息指定到一个特定的位置,validate()方法的参数中可以进行自定义,示例代码如下: 复制代码 代码如下: <script type="text/javascript"> jQuery.validator.addMethod("regex", //addMethod第1个参数:方法名称 function(value, element, params) { //addMethod第2个参数:验证方法, //验证

  • JQuery扩展插件Validate—4设置错误提示的样式

    JQuery扩展插件Validate—4设置错误提示的样式

    我们先来使用firebug查看在前面的示例中JS产生的html错误提示: 从图中我们发现错误信息是被放在了一个label标签中,且有一个类样式error,只要为signupform下面的label标签中的error定css样式,应该就可以修改显示结果了,添加的css代码如下: 复制代码 代码如下: <style type="text/css"> * { font-size: 14px; } #signupForm label.error { color:Red; font-

  • jQuery插件Validate实现自定义校验结果样式

    jQuery插件Validate实现自定义校验结果样式

    本文实例介绍了jQuery插件Validate实现自定义校验结果样式的详细代码,分享给大家供大家参考,具体内容如下 效果如下: 具体步骤: 1.引入依赖包 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script src="lib/jquery.validate.js" type="text/ja

  • 强烈推荐240多个jQuery插件提供下载

    强烈推荐240多个jQuery插件提供下载

    jQuery 是一个快速的,简洁的 javaScript 库,使用户能更方便地处理 HTML documents.events.实现动画效果,并且方便地为网站提供 AJAX 交互. jQuery 还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择. jQuery 能够使用户的 html 页保持代码和 html 内容分离,也就是说,不用再在 html 里面插入一堆js来调用命令了,只需定义 id 即可.今天在Kollermedia.at上发现了一篇J

  • jQuery验证插件validate使用方法详解

    jQuery验证插件validate使用方法详解

    1. 写在前面 我们知道,用户在注册的时候,会有个表单页面,然后有些选项是必填的,有些要填的内容是有规范的,这些都要在用户提交之前进行验证才行,如果不符合要求,需要在右边显示一个友好的提示,让用户修改. 记得以前在学习Servlet的时候,实现一个简单的用户注册功能的验证是在后台做的,有些用了正则表达式,有些没用,但是都比较简单.流程是这样的,前台提交表单数据后,servlet获取数据先进行验证,如果不符合要求,将提示信息放到一个List中,然后再把List存到session中,跳转到一个新的页

  • jquery插件validate验证的小例子

    复制代码 代码如下: <!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/xhtml"><head>    <title></titl

随机推荐