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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
javascript window.opener的用法分析
Apr 07 Javascript
js判断IE浏览器版本过低示例代码
Nov 22 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
微信小程序实现下拉加载更多商品
Dec 29 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
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
js添加table的行和列 具体实现方法
2013/07/22 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
python实现xlsx文件分析详解
2018/01/02 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
使用Python的turtle模块画国旗
2019/09/24 Python
利用python 读写csv文件
2020/09/10 Python
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
普通员工辞职信
2014/01/17 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python