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框架设计读书笔记之种子模块
Dec 02 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
纯JS代码实现气泡效果
May 04 Javascript
jQuery实现布局高宽自适应的简单实例
May 28 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
Node.js 的 GC 机制详解
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之第一天
2006/10/09 PHP
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
python实现定制交互式命令行的方法
2014/07/03 Python
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
Python工程师面试必备25条知识点
2018/01/17 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
python实现归并排序算法
2018/11/22 Python
详解python中的数据类型和控制流
2019/08/08 Python
一文读懂Python 枚举
2020/08/25 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
一年级学生期末评语
2014/04/21 职场文书
留学生求职信
2014/06/03 职场文书
秋季运动会加油词
2015/07/18 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS
关于 Python json中load和loads区别
2021/11/07 Python
Nginx跨域问题解析与解决
2022/08/05 Servers