jValidate 基于jQuery的表单验证插件


Posted in Javascript onDecember 12, 2009

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

<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 : 表示控件所在的表单实例

示例截图:

jValidate 基于jQuery的表单验证插件
源码下载 压缩包附带jMessageBox示例
https://3water.com/jiaoben/23094.html

Javascript 相关文章推荐
CSS和Javascript简单复习资料
Jun 29 Javascript
javascript将url中的参数加密解密代码
Nov 17 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
js 根据对象数组中的属性进行排序实现代码
Sep 12 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 #Javascript
Ext.MessageBox工具类简介
Dec 10 #Javascript
模仿JQuery.extend函数扩展自己对象的js代码
Dec 09 #Javascript
js 与或运算符 || &amp;&amp; 妙用
Dec 09 #Javascript
测试你的JS的掌握程度的代码
Dec 09 #Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 #Javascript
jMessageBox 基于jQuery的窗口插件
Dec 09 #Javascript
You might like
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
php模板函数 正则实现代码
2012/10/15 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
思想品德自我鉴定
2013/10/12 职场文书
资料员的岗位职责
2013/11/20 职场文书
行政部主管岗位职责
2013/12/28 职场文书
超市创业计划书
2014/04/24 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android