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下操作HTML控件的实现代码
Jan 12 Javascript
IE中createElement需要注意的一个问题
Jul 13 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
javascript this详细介绍
Sep 19 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
在layui中select更改后生效的方法
Sep 05 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
Vue引入Stylus知识点总结
Jan 16 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
php下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
Javascript window对象详解
2014/11/12 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
python 七种邮件内容发送方法实例
2014/04/22 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
Python File readlines() 使用方法
2018/03/19 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
python是怎么被发明的
2020/06/15 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
工程造价管理专业大专生求职信
2013/10/06 职场文书
内科护士实习自我鉴定
2013/10/17 职场文书
质量工程师岗位职责
2013/11/16 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
文明倡议书
2015/01/19 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书