jValidate 基于jQuery的表单验证插件

2016-02-19 14:34 12 1 收藏

下面图老师小编跟大家分享一个简单易学的jValidate 基于jQuery的表单验证插件教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

【 tulaoshi.com - Web开发 】

网上的各类表单验证插件的验证规则都是写在脚本里的,但我的插件的验证规则却是写在表单元素的属性里的。如下面的例子:
代码如下:
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:'错误消息'};

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

}

其中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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

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

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

function(item, form){

//代码

}

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

onerror

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

function(item, form){

//代码

}

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

示例截图:


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

来源:http://www.tulaoshi.com/n/20160219/1607225.html

延伸阅读
标签: Web开发
打包下载 如下图: 但是这些弹出来的窗口的样式非常的单调无法设置,并且窗口标题还根据不同的浏览器显示不同的标题内容,非常的丑陋!对于高审美观的现代人来说,就大打折扣了! jQuery现在这么流行、这么火,但网上却好像还是没有提供类似于MessageBox的插件(或者只是我没有找到而已),类似的模式窗口插件倒是有一大堆,但这都不是...
标签: Web开发
如果你打算更新,请确保你同时更新验证插件Validation Plugin 到1.5.1 版本,它同时兼容1.2.6和1.3的版本。主要的更新包括: 1. 使用validHandler 参数来替换之前必须绑定无用的form事件,具体的demo可以访问marketo (http://jquery.bassistance.de/validate/demo/marketo/) 2. 添加Tiny MCE ,示例demo(http://jquery.bassistance.de/validate...
标签: Web开发
HTML代码 代码如下: div class="tab" li class="selected" 1/li li class="hover"2/li li class="hover"3/li /div div class="tab_box" div class="newslist"第一个/div div class="newslist"第二个/div div class="newslist"第三个/div /div Jquery 代码如下: $().PPXTabs({ nav:'.tab li',nav_txt:'.tab_box div',s...
标签: Web开发
这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录。 先贴一个国内某大公司的代码: 代码如下: script type="text/javascript" function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_password': '请输入您的登录密码', 'ls_password_length': '密...
标签: Web开发
先来看看使用方法。 演示地址 http://demo.jb51.net/js/jCutter_jquery/demo.htm HTML文件中这样写: 代码如下: div img src="1.jpg" alt="" div 这是点开后的页面的内容 /div /div 调用的话需要这样写: 代码如下: $(document).ready(function(){ options={ 'speedIn':600, //图片进入时候的动画速度 'speedOu...

经验教程

164

收藏

50
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部