本文介绍如何使用 jQuery 表单验证插件 formValidation 实现个性化的表单错误提示。通过引入必要的 JS 和 CSS 文件,利用 class 属性中的 validate 参数(如 required、custom、length 等)配置验证规则。文章详细列举了单选框、复选框、下拉框、电话及邮箱等常见表单元素的验证方法,并展示了如何自定义正则表达式和错误提示信息,帮助开发者快速集成高效的表单校验功能。
效果展示如下:

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] : 字段匹配 (例如:确认密码)
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实现个性化错误提示,颇具推荐价值。
文件打包下载