首页 web前端 js教程 jValidate 基于jQuery的表单验证插件_jquery

jValidate 基于jQuery的表单验证插件_jquery

May 16, 2016 pm 06:39 PM
表单验证

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

复制代码 代码如下:




注意看上面代码中以“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

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

php如何使用CodeIgniter4框架? php如何使用CodeIgniter4框架? May 31, 2023 pm 02:51 PM

PHP是一种非常流行的编程语言,而CodeIgniter4是一种常用的PHP框架。在开发Web应用程序时,使用框架是非常有帮助的,它可以加速开发过程、提高代码质量、降低维护成本。本文将介绍如何使用CodeIgniter4框架。安装CodeIgniter4框架CodeIgniter4框架可以从官方网站(https://codeigniter.com/)下载。下

如何使用Flask-WTF实现表单验证 如何使用Flask-WTF实现表单验证 Aug 03, 2023 pm 06:53 PM

如何使用Flask-WTF实现表单验证Flask-WTF是一个用于处理Web表单验证的Flask扩展,它提供了一种简洁、灵活的方式来验证用户提交的数据。本文将向您展示如何使用Flask-WTF扩展来实现表单验证。安装Flask-WTF要使用Flask-WTF,首先需要安装它。可以使用pip命令来安装:pipinstallFlask-WTF导入所需模块在F

Laravel开发:如何使用Laravel Validation验证表单请求? Laravel开发:如何使用Laravel Validation验证表单请求? Jun 13, 2023 pm 01:34 PM

Laravel是一个流行的PHPWeb开发框架,它提供了很多方便的功能来加快开发者的工作。其中,LaravelValidation是一种非常实用的功能,它可以帮助我们轻松地验证表单请求和用户输入的数据。本文就将介绍如何使用LaravelValidation验证表单请求。什么是LaravelValidationLaravelValidation是La

如何在Laravel中使用中间件处理表单验证 如何在Laravel中使用中间件处理表单验证 Nov 02, 2023 pm 03:57 PM

如何在Laravel中使用中间件处理表单验证,需要具体代码示例引言:在Laravel中,表单验证是非常常见的任务。为了确保用户输入的数据的有效性和安全性,我们通常会对表单提交的数据进行验证。Laravel提供了一个方便的表单验证功能,同时也支持使用中间件来处理表单验证。本文将详细介绍如何在Laravel中使用中间件处理表单验证,并提供具体的代码示例

如何使用Golang实现Web应用程序的表单验证 如何使用Golang实现Web应用程序的表单验证 Jun 24, 2023 am 09:08 AM

表单验证是Web应用程序开发中非常重要的一个环节,它能够在提交表单数据之前对数据进行有效性检查,避免应用程序出现安全漏洞和数据错误。使用Golang可以轻松地实现Web应用程序的表单验证,本文将介绍如何使用Golang来实现Web应用程序的表单验证。一、表单验证的基本要素在介绍如何实现表单验证之前,我们需要知道表单验证的基本要素是什么。表单元素:表单元素是指

PHP表单验证技巧:如何使用filter_input函数检验用户输入 PHP表单验证技巧:如何使用filter_input函数检验用户输入 Aug 01, 2023 am 08:51 AM

PHP表单验证技巧:如何使用filter_input函数检验用户输入引言:在开发Web应用程序时,表单是与用户进行交互的重要工具。而正确地验证用户输入,是保证数据的完整性和安全性的关键步骤之一。PHP提供了filter_input函数,可以方便地对用户输入进行验证和过滤。本文将介绍如何使用filter_input函数来检验用户输入,并提供相关的代码示例。一、

PHP中的表单验证和过滤方法? PHP中的表单验证和过滤方法? Jun 29, 2023 pm 10:04 PM

PHP作为一种广泛应用于Web开发的脚本语言,其表单验证和过滤是非常重要的一部分。在用户提交表单的过程中,需要对用户输入的数据进行验证和过滤,以确保数据的安全性和有效性。本文将介绍PHP中如何进行表单验证和过滤的方法和技巧。一、表单验证表单验证是指对用户输入的数据进行检查,以确保数据符合特定的规则和要求。常见的表单验证包括对必填项的验证、邮箱格式、手机号码格

如何使用Hyperf框架进行表单验证 如何使用Hyperf框架进行表单验证 Oct 20, 2023 pm 02:04 PM

如何使用Hyperf框架进行表单验证引言:随着Web应用程序的发展,表单验证成为了保证数据的准确性和安全性的重要环节。Hyperf框架作为一款高性能的PHP开发框架,提供了强大的表单验证功能,本文将介绍如何使用Hyperf框架进行表单验证,并提供具体的代码示例。一、安装Hyperf框架:使用Composer进行安装:composercreate-proje

See all articles