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

时间:2023-07-02 05:31:26 

其效果图如下:
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实现个性化错误提示,值得推荐。
文件打包下载

标签:jQuery,表单验证,formValidation
0
投稿

猜你喜欢

  • python中lambda()的用法

    2022-07-19 05:15:45
  • mysql int范围与最大值分析

    2012-03-26 18:24:00
  • 如何提升JavaScript的运行速度(DOM篇)[译]

    2009-02-25 12:24:00
  • PyTorch中clone()、detach()及相关扩展详解

    2022-06-29 17:50:34
  • Go 库性能分析工具pprof

    2024-02-13 20:55:27
  • 基于python实现把json数据转换成Excel表格

    2021-02-20 05:22:04
  • python小程序基于Jupyter实现天气查询的方法

    2021-05-30 10:39:40
  • 在pycharm上mongodb配置及可视化设置方法

    2022-12-04 07:05:31
  • python中的tkinter库弹窗messagebox详解

    2023-11-12 04:02:05
  • Python语言编写电脑时间自动同步小工具

    2023-12-23 20:46:08
  • javascript定时变换图片实例代码

    2024-04-17 10:24:14
  • js中的for如何实现foreach中的遍历

    2024-04-29 13:19:37
  • python实现多进程按序号批量修改文件名的方法示例

    2021-10-30 08:33:42
  • Gradio机器学习模型快速部署工具quickstart前篇

    2023-07-01 15:07:51
  • vue-cli 环境变量 process.env的使用及说明

    2024-05-29 22:28:45
  • MySQL数据库中CHAR与VARCHAR之争

    2011-05-05 16:33:00
  • jQuery mobile转换url地址及获取url中目录部分的方法

    2023-07-02 05:34:34
  • python中input()与raw_input()的区别分析

    2023-02-12 14:08:36
  • python基于paramiko库远程执行 SSH 命令,实现 sftp 下载文件

    2022-11-09 23:31:31
  • Python Opencv轮廓常用操作代码实例解析

    2023-01-03 08:46:59
  • asp之家 网络编程 m.aspxhome.com