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 表单下所有元素的隐藏
Jul 25 Javascript
JavaScript 学习笔记(十四) 正则表达式
Jan 22 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
jsTree使用记录实例
Dec 01 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 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
thinkPHP实现表单自动验证
2014/12/24 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
pytorch数据预处理错误的解决
2020/02/20 Python
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
秘书行业自我鉴定范文
2013/12/30 职场文书
音乐教育感言
2014/03/05 职场文书
党员一句话承诺大全
2014/03/28 职场文书
老公给老婆的保证书
2014/04/28 职场文书
学校评语大全
2014/05/06 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
先进班组事迹材料
2014/12/25 职场文书
学校党支部承诺书
2015/04/30 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
Python实战之实现简易的学生选课系统
2021/05/25 Python