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 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
详解如何在angular2中获取节点
Nov 23 Javascript
JavaScript实现连连看连线算法
Jan 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
PHPMailer安装方法及简单实例
2008/11/25 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP排序算法类实例
2015/06/17 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
javascript入门基础之私有变量
2010/02/23 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
Python交互环境下实现输入代码
2018/06/22 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
Django视图扩展类知识点详解
2019/10/25 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
国际商务系学生个人的自我评价
2013/11/26 职场文书
主持词开场白
2014/03/17 职场文书
开学典礼策划方案
2014/05/28 职场文书
大学生活动总结模板
2014/07/02 职场文书
贷款担保书
2015/01/20 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
实习推荐信格式模板
2015/03/27 职场文书
监理中标通知书
2015/04/16 职场文书
新年晚会开场白
2015/05/29 职场文书
预备党员表决心的话
2015/09/22 职场文书
python Polars库的使用简介
2021/04/21 Python