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创建插件的代码分析
Apr 14 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 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内核解析:PHP中的哈希表
2014/01/30 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
新闻系毕业生推荐信
2013/11/16 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
团日活动总结书格式
2014/05/08 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android
Java实现二分搜索树的示例代码
2022/03/17 Java/Android
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python