html中表单的校验的插件,功能强大的jquery.validate表单验证插件

本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下

1 、表单验证的准备工作

在开启长篇大论之前,首先将表单验证的效果展示给大家。

1.点击表单项,显示帮助提示

8b02ae5c427c5ca616765321a66680f7.png

2.鼠标离开表单项时,开始校验元素

3b5d218e8b6f4afcb2a1eec8179b881c.png

3.鼠标离开后的正确、错误提示及鼠标移入时的帮助提醒

de5bcc07f0fd80204feec79125565c18.png

对于初学者而言,html表单验证是一项极其琐碎的事情。要做好表单验证,需要准备以下基本要素:

1).html表单结构:包含需要校验的表单元素;

2).js逻辑控制:在需要校验的表单元素上绑定事件,如点击、获取焦点、失去焦点等事件,并设置这些事件对应的执行函数;

3).css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式。

这3类基本要素中,html表单结构的创建相对简单。表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息。这里我参考了百度,163邮箱,京东等知名互联网企业的注册页面,归纳出表单验证需要的主要提示信息分类如下:

1).表单元素获取焦点后的帮助信息(插件中对应class名"tip");

2).表单元素验证通过时的成功信息(插件中对应class名"valid");

3).表单元素验证失败时的错误信息(插件中对应class名"error")。

如果不借助任何插件,我们需要花费大量的时间去编写不同类型的信息提示,考虑各种样式间的来回切换,以及编写一些基本的验证规则。名言曰:"我之所以看得更远,是因为我站在巨人的肩膀上"。何不直接利用一些已有的成熟插件,来帮助我们快速的编写一个表单验证功能,这样既能提高效率,又能让我们抽出时间专注于我们自己的逻辑。

在众多表单验证插件中,jquery validate插件是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证。它的特点如下:

1.内置验证规则:拥有必填、数字、email、url和信用卡号码等内置验证规则;

2.自定义验证规则:可以很方便地自定义验证规则(通过$.validator.addMethod(name,method,message)实现);

3.简单强大的验证信息提示:默认了验证信息提示,并提供自定义覆盖默认信息提示的功能(通过设置插件中的message参数来实现);

4.实时验证:可以通过keyup或blur事件触发验证,而不仅仅在表单提交的时候验证。

下面我们选择该插件,来实现一个简单而漂亮的表单验证例子。

2 jquery validate插件实现表单验证的小例子

在引入jquery validate插件前,需要先引入它所依赖的文件jquery.js(例子中jquery的版本为1.9);在实现的过程中,为了更好地效果,我在jquery.validate.extend.js文件中对jquery validate原有的功能进行了扩展,并修改了相关默认选项;因此在文档头部需要引入的文件有三个:

2.1 表单html

表单验证3要素中,首先需要完成html表单结构代码的编写。为了让表单结构简单而清晰,我们将表单的每个元素都包裹在一个div结构中:用label标签用来标记元素的名称,接着便是表单元素本身。

【注明:1.使用label标签的好处是为鼠标用户改进了可用性。当在label元素内点击文本时,浏览器就会自动将焦点转到和label相关的表单控件上。2.每个需要校验的表单元素都应该设置id和name属性,方便在使用插件时将元素绑定校验规则和校验信息。】

表单实现代码如下:

jquery-validate表单校验验证

用户名:

autocomplete="off" tip="请输入用户名">

密码:

tip="长度为6-16个字符">

确认密码:

金额:

tip="交易金额必须大于0,且最多有两位小数">

2.2 表单验证js逻辑

接着我们通过js来实现对表单元素的校验。在校验之前,我对jquery validate插件进行了功能扩展,对默认的选项进行了重写覆盖。jquery validate插件默认只提供了校验正确及错误时的提示,缺少我们常见的帮助信息提示。为了解决这个问题,我仔细研究了插件的源码,发现插件本身提供了onfocusin(校验元素获得焦点时调用)和onfocusout(校验元素失去焦点时调用)这两个函数。通过修改默认参数的这两个接口,可以实现党用户鼠标点击或选择元素时(即元素获得焦点),提示帮助信息;在用户鼠标离开元素时(即元素失去焦点),移除帮助信息。

此外,jquery validate默认提供表单元素输入时的实时校验,因为我们要求在输入时只提示用户帮助信息,故需要关闭输入的实时校验,为此我们将默认参数中的onkeyup设置为null。

具体的扩展改进代码我放到了新增js脚本jquery.validate.extend.js中,代码如下:

/*******************************插件新功能-设置插件validator的默认参数*****************************************/

$.validator.setDefaults({

/*关闭键盘输入时的实时校验*/

onkeyup: null,

/*添加校验成功后的执行函数--修改提示内容,并为正确提示信息添加新的样式(默认是valid)*/

success: function(label){

/*label的默认正确样式为valid,需要通过validClass来重置,否则这里添加的其他样式不能被清除*/

label.text('').addClass('valid');

},

/*重写校验元素获得焦点后的执行函数--增加[1.光标移入元素时的帮助提示,2.校验元素的高亮显示]两个功能点*/

onfocusin: function( element ) {

this.lastActive = element;

/*1.帮助提示功能*/

this.addWrapper(this.errorsFor(element)).hide();

var tip = $(element).attr('tip');

if(tip && $(element).parent().children(".tip").length === 0){

$(element).parent().append("" + tip + "");

}

/*2.校验元素的高亮显示*/

$(element).addClass('highlight');

// Hide error label and remove error class on focus if enabled

if ( this.settings.focusCleanup ) {

if ( this.settings.unhighlight ) {

this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );

}

this.hideThese( this.errorsFor( element ) );

}

},

/*重写校验元素焦点离开时的执行函数--移除[1.添加的帮助提示,2.校验元素的高亮显示]*/

onfocusout: function( element ) {

/*1.帮助提示信息移除*/

$(element).parent().children(".tip").remove();

/*2.校验元素高亮样式移除*/

$(element).removeClass('highlight');

/*3.替换下面注释的原始代码,任何时候光标离开元素都触发校验功能*/

this.element( element );

/*if ( !this.checkable( element ) && ( element.name in this.submitted || !this.optional( element ) ) ) {

this.element( element );

}*/

}

});

完善插件的功能后,现在就是重头戏——使用插件为表单元素绑定校验规则和校验信息。jquery validate插件提供validate方法实现form表单的元素校验,该方法的参数是一个包含键值对的对象。其中最常用的键有rules(为不同元素定义校验规则),messages(为不同元素定义错误提示信息),success(校验正确后的字符串或者是执行函数)。常见的校验规则有:required(是否必填),minlength(最小长度),maxlength(最大长度),email(email格式规则),url(url格式规则),date(date格式规则),rangelength(给定长度范围规则),equalTo(要求元素等于另一元素例如equalsTo:"#password")。下面的代码呈现了如何对表单中的用户名、密码等字段绑定校验规则:

$(document).ready(function(){

$("#regForm").validate({

rules: {

username:{

required: true,

minlength: 2

},

password:{

required: true,

minlength: 6,

maxlength: 16

},

repassword:{

required: true,

equalTo: "#password"

},

amt: {

required: true,

amtCheck: true

}

},

messages:{

username:{

required: "用户名不能为空",

minlength: "用户名的最小长度为2"

},

password:{

required: "密码不能为空",

minlength: "密码长度不能少于6个字符",

maxlength: "密码长度不能超过16个字符"

},

repassword:{

required: "确认密码不能为空",

equalTo: "确认密码和密码不一致"

},

amt: {

required: "金额不能为空"

}

}

});

});

2.3 表单验证css样式

最后还要为页面元素添加css样式。插件中有一系列默认选项:其中默认错误显示标签为label,错误样式为label.error。上面在jquery.validate.extend.js文件中,有一个success函数需要说明一下。这个函数是在校验成功的时候执行的,我们在函数中为label提示标签添加了校验正确对应的样式label.valid。因此在css中如果要美化信息提示,需要对label相关样式如error,valid样式进行设计。此外我们在扩展插件功能中添加了一个class为tip的label标签,该标签仅在校验元素获得焦点时生成。为此,还需要设置label的tip样式。

完整的样式文件内容具体如下:

body{

font-family: Microsoft Yahei;

font-size: 15px;

}

fieldset{ width: 680px; }

legend{ margin-left: 8px; }

.item{

height: 56px;

line-height: 36px;

margin: 10px;

}

.item .item-label{

float: left;

width: 80px;

text-align: right;

}

.item-text{

float: left;

width: 244px;

height: 16px;

padding: 9px 25px 9px 5px;

margin-left: 10px;

border: 1px solid #ccc;

overflow: hidden;

}

.item-select{

float: left;

height: 34px;

border: 1px solid #ccc;

margin-left: 10px;

font-size: 14px;

padding: 6px 0px;

}

.item-submit{

margin-left: 88px;

}

input.error{

border: 1px solid #E6594E;

}

input.highlight{

border: 1px solid #7abd54;

}

label.error,label.tip{

float: left;

height: 32px;

line-height: 32px;

font-size: 14px;

text-align: left;

margin-left: 5px;

padding-left: 20px;

color: red;

background: url('error.png') no-repeat left center;

}

label.tip{

color: #aaa;

background: url('tip.png') no-repeat left center;

}

label.valid{

background: url('valid.png') no-repeat left center;

width: 32px;

}

3 表单验证效果演示

至此,表单校验的代码编写和插件的应用已经全部完成。在浏览器中运行代码,显示效果如下图:

de5bcc07f0fd80204feec79125565c18.png

基本上满足现在大多数网站表单验证的要求,如果需要增加验证规则,只需要在jquery.validate.extend.js中增加校验规则即可,例子如下:

/*******************************插件字段校验*****************************************/

$.validator.addMethod(

"amtCheck",

function(value, element){

/*var dotPos = value.indexOf('.');

return value > 0 && dotPos < 0 && (dotPos > 0 && value.substring(dotPos + 1) <= 2);*/

return value && /^\d*\.?\d{0,2}$/.test(value);

},

"金额必须大于0且小数位数不超过2位"

);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/566833.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

聊天室程序python_Python聊天室程序(基础版)

本文实例为大家分享了Python聊天室程序的具体代码&#xff0c;供大家参考&#xff0c;具体内容如下客户端代码&#xff1a;# Filename: socketClient.pyimport socketimport sysimport threading# Client GUIfrom tkinter import *import Pmw# Create a TCP/IP socketsock soc…

怎么设置缓存 html js,如何为css / js文件设置缓存

如果你使用Apache,我会从这里开始.压缩和缓存是不同的.对于压缩,PHP Minify或YUI Compressor是伟大的.如果一切都失败,TextMate有一个很好的Javascript Tools Bundle,可以压缩你的代码.您可以手动压缩代码,然后将其上传,并撤消压缩以使源恢复到可读状态.我不推荐这个,但我以前做…

swing 显示文件下文件_Linux 文件权限详解

阅读五分钟&#xff0c;每日十点&#xff0c;和您一起终身学习&#xff0c;这里是程序员Android本篇文章主要介绍 Android 开发中的部分知识点&#xff0c;通过阅读本篇文章&#xff0c;您将收获以下内容:一、使用ls -l 显示文件的详细信息二、Linux下的文件权限分组三、drwx 代…

山东工业大学计算机及应用,彭玉旭副教授

[1] 彭玉旭&#xff0c;张力军.Ad Hoc中基于位置的路由转发策略比较.解放军理工大学学报&#xff0c;2004&#xff0c;5(6)&#xff1a;21-24.[2] Pengyuxu,Zhang lijun, Virtual Destination based Geographic Routing in Ad Hoc Mobile Networks, IEEE International Confere…

python startswitch_使用python esl 实现FreeSWITCH自动外呼

使用python esl 实现FreeSWITCH自动外呼tags&#xff1a;FreeSWITCH python 自动外呼 创建时间&#xff1a;2016-03-19 09:37:39以下项目开源于&#xff1a;https://github.com/nwaycn/nway_ac代码&#xff1a;python# codingutf-8__author__ lihao,18621575908版权所有&#…

未来教育计算机二级书怎么样,未来教育计算机二级

1册图书1张光盘&#xff0c;轻松应对2018年一级计算机基础及MS Office应用考试 n 1.历年真题精选&#xff0c;全方位把握真考动向&#xff0c;具有练习价值 n (1)新大纲、新题型、新题库&#xff0c;全方位解读无纸化考试&#xff0c;帮助考生轻松过关。 n (2)精选2017年~2016年…

python集合操作班级干部竞选演讲稿_精选竞选班干部的演讲稿集合7篇

精选竞选班干部的演讲稿集合7篇演讲稿在写作上具有一定的格式要求。在现实社会中&#xff0c;用到演讲稿的地方越来越多&#xff0c;为了让您在写演讲稿时更加简单方便&#xff0c;以下是小编整理的竞选班干部的演讲稿7篇&#xff0c;欢迎阅读与收藏。竞选班干部的演讲稿 篇1尊…

江苏计算机专业,行情火爆的计算机专业:江苏计算机专业高校最低录取分排序...

原标题&#xff1a;行情火爆的计算机专业&#xff1a;江苏计算机专业高校最低录取分排序现如今的十大热门专业里&#xff0c;计算机类专业总是稳居榜首&#xff01;几年前市场对计算机专业人才的需求非常大&#xff0c;计算机专业红得发紫&#xff0c;毕业生是"皇帝的女儿…

em算法 实例 正态分布_Petuum提出序列生成学习算法通用框架

近日&#xff0c;来自人工智能创业公司 Petuum 的研究人员发表论文&#xff0c;提出序列生成学习算法的通用框架——广义的熵正则化策略优化框架(Generalized Entropy-Regularized Policy Optimization)。该框架是对包括最大似然学习 (MLE)、增强学习 (RL) 等多种广泛使用的算法…

计算机网络体系结构最有影响的标准,浅谈计算机网络中的体系结构

夏杰【摘 要】计算机网络是由各类具有独立功能的计算机系统和终端通过通信线路连接起来的复杂系统&#xff0c;网络中各计算机必须遵从通信规定才能相互协调工作。为了设计这样复杂的系统&#xff0c;网络工作者提出了分层实现计算机网络功能的方法。【关键词】体系结构&#x…

springboot 集成redis_一文详解Spring Boot 集成 Redis

redis设置&#xff1a;修改redis服务器的配置文件vim /usr/local/redis/bin/redis.confbind 0.0.0.0 protected-mode no重新启动redissystemctl restart redis.service #重新启动服务注意&#xff1a;服务器的话需要设置安全组开放端口1.导入依赖org.springframework.boot …

计算机用手机的网络,电脑做热点让手机上网_电脑开热点给手机用

2016-11-26 12:00:20你好!很高兴为你解答&#xff0c;有两个解决办法:1.在每台机的本地连接--属性--常规--internet协议(TCP/IP)--常规里,设置成"自动获取IP地址"2.在每台机的本地连接--...2017-01-06 14:44:121.打开任务栏右下角的网络连接&#xff0c;在弹出的界面…

shell开启飞行模式_原来手机飞行模式有这么多用处!99%的深圳人都不知道...

相信大家都知道我们的手机里有个功能叫「飞行模式」(又称航空模式)它可以关掉手机收发信号的装置避免手机信号对飞机飞行造成干扰来源&#xff1a;网络那么对于不常坐飞机的人来说「飞行模式」功能是不是毫无用处呢&#xff1f;当然不是今天易小姐就带大家解锁关于「飞行模式」…

计算机学报在线阅读,面向目标检测与姿态估计的联合文法模型计算机学报.pdf...

第卷第期 计 算 机 学 报&#xff13;&#xff17; &#xff11;&#xff10;&#xff36;&#xff4f;&#xff4c;&#xff0e;&#xff13;&#xff17;&#xff2e;&#xff4f;&#xff0e;&#xff11;&#xff10;年月&#xff12;&#xff10;&#xff11;&#xff14;…

联想微型计算机启天e4300,戴尔轻薄商务本Latitude E4200/E4300开卖

戴尔随迅驰2平台的发布全面更新了自己的Latitude商用笔记本产品线&#xff0c;之前15和14寸的E6000/E5000系列已经上市销售&#xff0c;今天两款轻薄型号E4300/E4200也摆上了戴尔美国官网的货架。13.3寸的E4300目标直指联想ThinkPad X300/X301系列&#xff0c;虽然在轻薄程度上…

python读取坐标文本文件_Python 实现文件读写、坐标寻址、查找替换功能

读文件打开文件(文件需要存在)#打开文件f open("data.txt","r") #设置文件对象print(f)#文件句柄f.close() #关闭文件#为了方便&#xff0c;避免忘记close掉这个文件对象&#xff0c;可以用下面这种方式替代with open(data.txt,"r") as f: #设置…

北京大学计算机科学李丰,中文智能问答系统作业解析-北京大学计算机科学技术研究所.PDF...

中文智能问答系统作业解析-北京大学计算机科学技术研究所中文智能问答系统作业解析互联网数据挖掘北京大学计算机研究所语言计算与互联网挖掘研究室封闭测试结果排序队伍 封闭测试 开放测试1200012753 1200012756 1200012767 1200012900 19.9 20.41100016614 1100016639 120001…

python4发布_Python 3.4.1 发布

Python 3.4.1 发布了&#xff0c;改进记录&#xff1a;Core and BuiltinsIssue #21418: Fix a crash in the builtin function super() when called without argument and without current frame (ex: embedded Python).Issue #21425: Fix flushing of standard streams in the…

浙江大学计算机考研408上岸,2016年跨考上岸浙江大学计算机研究生,初试412分经验谈!...

本帖最后由 sqrt7 于 2019-5-22 18:49 编辑一、俺为什么读书 。之前好多同学都加我QQ&#xff0c;让我介绍计算机考研的经验&#xff0c;在这里&#xff0c;我就以自己这一年左右时间的经历和感受谈一谈吧。先报一下自己的分数&#xff0c;总分412。总得来说这次考研发挥还是挺…

医疗小程序源码_不懂商城小程序源码,如何快速创建小程序商城?

小程序在近来发展十分迅速&#xff0c;从微信小程序游戏出发&#xff0c;到现在渗透到各种功能类型&#xff0c;甚至已经扩展到了其他的应用程序上。那么如今很多的小程序商城应该怎么创建呢&#xff1f;不懂商城小程序源码也可以自己制作吗&#xff1f;当然可以&#xff0c;下…