繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jQuery 表单验证插件formValidation实现个性化错误提示
- Javascript
- 如何用js控制css中的float的代码
- Autocomplete Textbox Example javascript实现自动完成成功
- FormValid0.5版本发布，带ajax自定义验证例子
- wordpress之js库集合研究介绍
- 推荐发几个常用控件(新加DHTML控件)
- 7. Microsoft Online-Crash Control, version 6.0(微软在线崩溃控件)
- javascript下阻止表单重复提交、防刷新、防后退
- javascript下计数器每秒自动加1
- 给所有的超级练级都加上onmousemove时间的js代码
- js实现运行代码需要刷新的解决方法
- 兼容FF/IE跟随鼠标的层的效果
- 用javascript获得css中的属性值的代码
- 用javascript实现页内搜索的脚本代码
- 用javascript 控制表格行的展开和隐藏的代码
- 用javascript实现隐藏状态栏的代码
- Code: write(s,d) 输出连续字符串
- javascript创建页面蒙板的一些知识技巧总结
- 转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
- 用javascript判断输入数据是否货币并自动添加￥符号的代码
- js类中获取外部函数名的方法
Javascript 中的 jQuery 表单验证插件formValidation实现个性化错误提示
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 522 ::
收藏到网摘: n/a
这里介绍另外一个表单验证插件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实现个性化错误提示，值得推荐。
文件打包下载
评论 (0) All
