jQuery表单验证插件formValidation实现个性化错误提示

上期在[jQuery插件Validate验证表单实现javascript表单验证功能]和[jQuery插件Validation验证表单实现javascript表单智能验证功能]中分别介绍了两个实现表单验证的jQuery插件，这里介绍另外一个表单验证插件formValidation，这个插件与前面两个插件的最大区别在于它实现了个性化的错误提示信息，显示在表单元素右上角类似于提示条，其效果图如下：

使用说明
需要使用jQuery库文件和formValidation库文件[下载实例代码]
http://jquery.com/
同时需要自定义显示提示错误信息的CSS样式

使用实例
一，包含文件部分

1. <script src="jquery.js" type="text/javascript"></script>
2. <script src="jquery.validationEngine.js" type="text/javascript"></script>
3. <link rel="stylesheet" href="validationEngine.jquery.css" type="text/css" media="screen" />

二，HTML部分

1. <input class="validate[required,custom[onlyLetter],length[0,100]]" name="firstname" type="text" />

formValidation插件的表单验证方法如下：

1. 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插件应用实例
一，验证单选框

1. <input class="validate[required] radio" type="radio" name="radiogoupe" value="5">
2. <input class="validate[required] radio" type="radio" name="radiogoupe" value="3"/>
3. <input class="validate[required] radio" type="radio" name="radiogoupe" value="9"/>

二，验证复选框

1. <input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="checkboxgroupe" value="5">
2. <input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="checkboxgroupe" value="3"/>
3. <input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="checkboxgroupe" value="9"/>

三，验证下拉框

1. <select name="sport" id="sport" class="validate[required]" >
2. <option value="1">biuuu_1</option>
3. <option value="2">biuuu_2</option>
4. <option value="3">biuuu_3</option>
5. <option value="4">biuuu_4</option>
6. </select>

四，验证电话号码

1. <input class="validate[required,custom[telephone]] text-input" type="text" name="telephone"/>

五，验证邮箱

1. <input class="validate[required,custom[email]] text-input" type="text" name="email" id="email" />

如上实例，使用formValidation插件实现表单验证方法比较简单，主要在于其实现的个性化错误提示，同时，可自定义匹配规则，如下：

1. "telephone":{
2. "regex":"/^[0-9-()]+$/",
3. "alertText":"* Invalid phone number"},

其中regex表示匹配规则

这样使用alertText就可以实现自定义的表单错误提示文本，这与Validation插件的使用方法相同，使用jQuery表单验证插件formValidation实现个性化错误提示，值得推荐。

点我下载jQuery插件formValidation实例源代码
http://jquerycodes.googlecode.com/files/formValidator.zip

相关文章
jQuery插件Validate验证表单实现javascript表单验证功能
jQuery插件Validation验证表单实现javascript表单智能验证功能

原创文章如转载，请注明：转载自 必优博客 http://www.biuuu.com/

本文链接地址：http://www.biuuu.com/?p=1104