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 相关文章推荐
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
JS+CSS实现炫酷光感效果
Sep 05 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
把77A收信机改造成收音机
2021/03/02 无线电
PHP类中Static方法效率测试代码
2010/10/17 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
js 内存释放问题
2010/04/25 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
python中将阿拉伯数字转换成中文的实现代码
2011/05/19 Python
Python 文件和输入输出小结
2013/10/09 Python
python字符串连接方式汇总
2014/08/21 Python
python利用Guetzli批量压缩图片
2017/03/23 Python
python 统计代码行数简单实例
2017/05/04 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
工厂门卫的岗位职责
2014/07/27 职场文书
简历自我评价模板
2015/03/11 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
js判断两个数组相等的5种方法
2022/05/06 Javascript
Redis特殊数据类型bitmap位图
2022/06/01 Redis