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 相关文章推荐
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
javascript下查找父节点的简单方法
Aug 13 Javascript
javascript禁用键盘功能键让右击及其他键无效
Oct 09 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
angularjs中的e2e测试实例
Dec 06 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
Mar 13 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
vue监听用户输入和点击功能
Sep 27 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 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操作文件方法问答
2007/03/16 PHP
发布一个迷你php+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
python list中append()与extend()用法分享
2013/03/24 Python
python实现udp数据报传输的方法
2014/09/26 Python
python对url格式解析的方法
2015/05/13 Python
对python中的高效迭代器函数详解
2018/10/18 Python
Python 加密与解密小结
2018/12/06 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
西部世纪面试题
2014/12/05 面试题
大学生求职工作的自我评价
2014/02/13 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
个人买房协议书范本
2014/10/06 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
给领导敬酒词
2015/08/12 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
深入浅析Django MTV模式
2021/09/04 Python