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 相关文章推荐
jquery 经典动画菜单效果代码
Jan 26 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
May 19 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
JavaScript实现背景自动切换小案例
Sep 27 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
PHP加密解密字符串汇总
2015/04/26 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
php pdo操作数据库示例
2017/03/10 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
使用js+jquery实现无限极联动
2013/05/23 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
Python 获取div标签中的文字实例
2018/12/20 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
德国网上药房:Apotal
2017/04/04 全球购物
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
购买一个高级域名:BuyDomains
2018/03/11 全球购物
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
应届生求职推荐信
2013/10/28 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
讲解员培训方案
2014/05/04 职场文书
爱与责任演讲稿
2014/05/20 职场文书
车间安全生产标语
2014/06/06 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS