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 相关文章推荐
js arguments对象应用介绍
Nov 28 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
微信小程序 常用工具类详解及实例
Feb 15 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
Vue中computed及watch区别实例解析
Aug 01 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使用数组实现队列
2012/02/05 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
类似框架的js代码
2006/11/09 Javascript
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
python实现贪吃蛇双人大战
2020/04/18 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
软件测试工程师面试问题精选
2016/10/28 面试题
中专毕业生求职简历的自我评价
2013/10/21 职场文书
简单的辞职信范文
2014/01/18 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
安全教育月活动总结
2014/05/05 职场文书
温馨提示标语
2014/06/26 职场文书
迎新生标语大全
2014/10/06 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书