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的Select选择框的华丽变身
Aug 23 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
js获取日期:昨天今天和明天、后天
Jun 11 Javascript
Jquery网页内滑动缓冲导航的实现代码
Apr 05 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
js实现文字选中分享功能
Jan 25 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 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
德生9700DX电路分析
2021/03/02 无线电
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
jquery 分页控件实现代码
2009/11/30 Javascript
预加载css或javascript的js代码
2010/04/23 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
一年级班主任寄语
2014/01/19 职场文书
教师辞职书范文
2015/02/26 职场文书
MySQL之select、distinct、limit的使用
2021/11/11 MySQL