jQuery 表单验证插件formValidation实现个性化错误提示


Posted in Javascript onJune 23, 2009

其效果图如下:
jQuery 表单验证插件formValidation实现个性化错误提示
使用说明
需要使用jQuery库文件和formValidation库文件[下载实例代码]
http://jquery.com/
同时需要自定义显示提示错误信息的CSS样式

使用实例
一,包含文件部分

<script src="jquery.js" type="text/javascript"></script> <script src="jquery.validationEngine.js" type="text/javascript"></script> <link rel="stylesheet" href="validationEngine.jquery.css" type="text/css" media="screen" />

二,HTML部分
<input class="validate[required,custom[onlyLetter],length[0,100]]" name="firstname" type="text" />

formValidation插件的表单验证方法如下:
validate[required,custom[onlyLetter],length[0,100]] 参数说明:required表示表单必填,custom[]表示验证的条件,length表示长度

formValidation插件其它说明:
optional: Special: 表单值不为空的情况
required: 必埴
length[0,100] : 长度范围
minCheckbox[7] : 最小复选框数
confirm[fieldID] : 匹配其它字段 (如:confirm password)
telephone : 匹配电话号码规则
email : 匹配电子邮箱规则
onlyNumber : 匹配数字规则
noSpecialCaracters : 匹配字符规则
onlyLetter : 匹配字母规则
date : 匹配 YYYY-MM-DD 格式

formValidation插件应用实例
一,验证单选框

<input class="validate[required] radio" type="radio" name="radiogoupe" value="5"> <input class="validate[required] radio" type="radio" name="radiogoupe" value="3"/> <input class="validate[required] radio" type="radio" name="radiogoupe" value="9"/>

二,验证复选框
<input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="checkboxgroupe" value="5"> <input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="checkboxgroupe" value="3"/> <input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="checkboxgroupe" value="9"/>

三,验证下拉框 
<select name="sport" id="sport" class="validate[required]" > <option value="1">biuuu_1</option> <option value="2">biuuu_2</option> <option value="3">biuuu_3</option> <option value="4">biuuu_4</option> </select>

四,验证电话号码 
<input class="validate[required,custom[telephone]] text-input" type="text" name="telephone"/>

五,验证邮箱
<input class="validate[required,custom[email]] text-input" type="text" name="email" id="email" />

如上实例,使用formValidation插件实现表单验证方法比较简单,主要在于其实现的个性化错误提示,同时,可自定义匹配规则,如下:

"telephone":{ "regex":"/^[0-9-()]+$/", "alertText":"* Invalid phone number"}, 其中regex表示匹配规则

这样使用alertText就可以实现自定义的表单错误提示文本,这与Validation插件的使用方法相同,使用jQuery表单验证插件formValidation实现个性化错误提示,值得推荐。
文件打包下载

Javascript 相关文章推荐
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 Javascript
setTimeout的延时为0时多个浏览器的区别
May 23 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
vue2的todolist入门小项目的详细解析
May 11 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 28 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 #Javascript
一些常用的JS功能函数代码
Jun 23 #Javascript
JQuery 无废话系列教程(二) jquery实战篇上
Jun 23 #Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 #Javascript
IE JS编程需注意的内存释放问题
Jun 23 #Javascript
js form 验证函数 当前比较流行的错误提示
Jun 23 #Javascript
javascript form 验证函数 弹出对话框形式
Jun 23 #Javascript
You might like
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
学习ExtJS Window常用方法
2009/10/07 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
解决vue动态为数据添加新属性遇到的问题
2018/09/18 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
Python logging模块学习笔记
2014/05/24 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
Python常见字典内建函数用法示例
2018/05/14 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
python 构造三维全零数组的方法
2018/11/12 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
Python的两道面试题
2013/06/29 面试题
毕业典礼演讲稿
2014/05/13 职场文书
解除租房协议书
2014/12/03 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python