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实现个性化错误提示,值得推荐。
文件打包下载
猜你喜欢
- 在写代码过程中,经常遇到一行代码很长的情况。为了让代码显得整齐干净,就需要把一行代码分成多行来写,Python中有两种小技巧可以实现该功能:
- python 地图经纬度转换、纠偏的代码如下所示:# -*- coding: utf-8 -*-import jsonimport urll
- Python中函数参数的定义主要有四种方式:1. F(arg1,arg2,…)这是最常见的定义方式,一个函数可以定义任意个参数,每个参数间用
- 所谓的模块导入( import ),是指在一个模块中使用另一个模块的代码的操作,它有利于代码的复用。在 Python 中使用 import
- 1. 前台templates/upload/upload.html<!DOCTYPE html><html lang=&q
- 一、首先你要确认你的鉴别模式:WIN NT鉴别模式呢还是混合模式,其中混合模式包括WIN NT鉴别模式和SQL SERVER 鉴别模式实施鉴
- 自去年以来,我们正在开发区块链(Blockchain)业务。最近使用过Ethereum并使用PHP,所以我想我们应该聊聊这个话题。这里有个前
- MYSQL里的BLOB数据类型BLOB是一个二进制大对象,用来存储可变数量的数据。BLOB类型分为4种:TinyBlob、Blob、Medi
- 当Python执行import语句时,它会在一些路径中搜索Python模块和扩展模块。可以通过sys.path查看这些路径,比如:>&
- python实现收支的自动计算,能够查询每笔账款的消费详情,具体内容如下1、函数需要两个文件:一个类似钱包功能,存放钱;另一个用于记录每笔花
- 应用场景域名资产监控,通过输入一个主域名,找到该域名对应的ip地址所在的服务器的端口开闭情况。通过定期做这样的监控,有助于让自己知道自己的资
- 优雅的设计经常包含一些特殊的字体,而这些字体并不存在于用户的字体库中,我们并不能奢求每一个访客都是设计师。 :-)虽然CSS3标
- 依赖包:pip install paramiko源码demo:from time import *import paramiko# 定义一个
- 近年,不论是正在快速增长的直播,远程教育以及IM聊天场景,还是在常规企业级系统中用到的系统提醒,对websocket的需求越来越大,对web
- 工欲善其事,必先利其器,开发工具这个东西觉得折腾下还是有好处的。但常常感觉专门抽出时间搞这个浪费时间,更常见的现象是已经明显感觉到当前的开发
- 前言在使用keras时候报错Keyerror ‘acc',这是一个keras版本问题,acc和accuracy本意是一样的,但是不同
- 迭代首先理解下什么是迭代,python中所有从左往右扫面对象的方式都是可迭代的有哪些方式是可迭代的:1.文件操作 我
- 过拟合当训练集的的准确率很高, 但是测试集的准确率很差的时候就, 我们就遇到了过拟合 (Overfitting) 的问题. 如图:过拟合产生
- 一.下载安装包1.安装网址https://www.jetbrains.com/pycharm/2.在导航栏输入网址回车3.点击 DOWNLO
- import osimport sysimport MySQLdbdef getStatus(conn):