jQuery 表单验证插件formValidation实现个性化错误提示
发布时间:2023-07-02 05:31:26
其效果图如下:
使用说明
需要使用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实现个性化错误提示,值得推荐。
文件打包下载


猜你喜欢
- Pytorch数据类型与转换(torch.tensor,torch.FloatTensor)之前遇到转为tensor转化为浮点型的问题,今天
- 本文实例为大家分享了opencv实现图像缩放效果的具体代码,供大家参考,具体内容如下图像缩放:图像缩放即对图像的大小进行调整,即放大或者缩小
- 前言最近不是快过年了,Python写对联挺火的,但是代码又不是人人都用,那就直接写个界面打包一下呗~主要实现只要运行后输入上联下联、横批,然
- 导语哈喽哈喽!大家好!我是木木子,又到了每日游戏更新环节!8月30日,对暑假还意犹未尽的孩子们收到了一份“开学大礼”:通知要求,严格限制向未
- Hadoop 命令行最常用指令篇:1.ls (list directory)Usage:hadoop fs -ls [R]Option: -
- 主键索引排序失效环境:MySQL8有一张用户信息表user_info,建表DDL如下:CREATE TABLE `user_info` (
- 之所以写这个,其实就是希望能对距离有一些概念,当然这个也是很基础的,不过千里之行始于足下嘛,各种路径算法,比如a*什么的都会用到这个距离测量
- 什么是固件Fixture 翻译成中文即是固件的意思。它其实就是一些函数,会在执行测试方法/测试函数之前(或之后)加载运行它们,常见的如接口用
- 目录通过与 OpenCV 模板匹配的 OCR信用卡 OCR 结果总结今天的博文分为三个部分。 在第一部分中,我们将讨论 OCR-A 字体,这
- 本文实例讲述了Go语言通过smtp发送邮件的方法。分享给大家供大家参考。具体实现方法如下:package mainimport ( 
- 如下所示:"""提取文档数超过10000的数据按照某个字段的值具有唯一性进行升序,按照@timestamp进行
- Adodb.Stream是ADO的Stream对象,提供存取二进制数据或者文本流,从而实现对流的读、写和管理等操作. 组件:&qu
- 上回 说到“大屏幕浏览页面的良好体验,本就应该用户自己调整窗口。”根据屏幕不同大小,缩小窗口出横向滚动条在所难免,但理想情况下,页面应该能适
- 可视化图表,有相当多种,但常见的也就下面几种,其他比较复杂一点,大都也是基于如下几种进行组合,变换出来的。对于初学者来说,很容易被这官网上众
- 故障状况:php网站连接mysql失败,但在命令行下通过mysql命令可登录并正常操作。解决方案:1、命令行下登录mysql,执行以下命令:
- Python 3 利用 Dlib 19.7 实现摄像头人脸检测特征点标定0.引言利用python开发,借助Dlib库捕获摄像头中的人脸,进行
- #-*- coding:utf-8 -*- from win32com.client import Dispatch if __name__
- 利用 vue+canvas 实现拼图小游戏,供大家参考,具体内容如下思路步骤一个拼图拼盘和一个原图参照对原图的切割以及随机排序通过W/A/D
- 目的描述:为了让没有安装Python的人也能使用我们编写的.py文件,我们需要将编写好的Python程序生成.exe文件。第一步 下载pyi
- 我们现在使用的验证手段都是以验证码为主,让用户根据图片输入验证字符,这种方法的安全度尚可,但会给用户带来一些不便和困扰,比如这个雅虎的验证码