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 相关文章推荐
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
js实现div在页面拖动效果
May 04 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
vue.js删除动态绑定的radio的指定项
Jun 02 Javascript
分析JS中this引发的bug
Dec 12 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 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
广播爱好者需要了解的天线知识
2021/03/01 无线电
php学习笔记 数组遍历实现代码
2011/06/09 PHP
php查询操作实现投票功能
2016/05/09 PHP
php+webSoket实现聊天室示例代码(附源码)
2017/02/17 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
删除节点的jquery代码
2014/01/13 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
js实现无缝滚动图
2017/02/22 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
Python 一句话生成字母表的方法
2019/01/02 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
python实现机器人卡牌
2019/10/06 Python
python绘制随机网络图形示例
2019/11/21 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
同学聚会欢迎辞
2014/01/14 职场文书
新教师岗前培训方案
2014/06/05 职场文书
迎国庆演讲稿
2014/09/05 职场文书
家庭贫困证明
2015/06/16 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技