位置: 编程技术 - 正文

jquery validate表单验证插件(jquery validate表单校验html)

编辑:rootadmin

推荐整理分享jquery validate表单验证插件(jquery validate表单校验html),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery validate表单内容怎么添加边框,jquery validate表单校验,jquery validate表单校验html,jquery validate表单校验,jquery validate表单内容怎么添加边框,jquery validate表单内容怎么添加边框,jquery validate表单校验长度,jquery validate表单内容怎么添加边框,内容如对您有帮助,希望把文章链接给更多的朋友!

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

1.html表单结构:包含需要校验的表单元素;2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击、获取焦点、失去焦点等事件,并设置这些事件对应的执行函数;3.css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式。

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

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事件触发验证,而不仅仅在表单提交的时候验证。

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

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

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

表单html

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

jquery validate表单验证插件(jquery validate表单校验html)

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

表单实现代码如下:

2.2 表单验证js逻辑

接着我们通过js来实现对表单元素的校验。在校验之前,我对jquery validate插件进行了功能扩展,对默认的选项进行了重写覆盖。

jquery validate插件默认只提供了校验正确及错误时的提示,缺少我们常见的帮助信息提示。

为了解决这个问题,我仔细研究了插件的源码,发现插件本身提供了onfocusin(校验元素获得焦点时调用)和onfocusout(校验元素失去焦点时调用)这两个函数。通过修改默认参数的这两个接口,可以实现党用户鼠标点击或选择元素时(即元素获得焦点),提示帮助信息;在用户鼠标离开元素时(即元素失去焦点),移除帮助信息。

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

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

完善插件的功能后,现在就是重头戏——使用插件为表单元素绑定校验规则和校验信息。

jquery validate插件提供validate方法实现form表单的元素校验,该方法的参数是一个包含键值对的对象。

其中最常用的键有rules(为不同元素定义校验规则),messages(为不同元素定义错误提示信息),success(校验正确后的字符串或者是执行函数)。

常见的校验规则有:required(是否必填),minlength(最小长度),maxlength(最大长度),email(email格式规 则),url(url格式规则),date(date格式规则),rangelength(给定长度范围规则),equalTo(要求元素等于另一元素例 如equalsTo:"#password")。

下面的代码呈现了如何对表单中的用户名、密码等字段绑定校验规则:

表单验证css样式

最后还要为页面元素添加css样式。插件中有一系列默认选项:其中默认错误显示标签为label,错误样式为label.error。

上面在 jquery.validate.extend.js文件中,有一个success函数需要说明一下。这个函数是在校验成功的时候执行的,我们在函数中为 label提示标签添加了校验正确对应的样式label.valid。因此在css中如果要美化信息提示,需要对label相关样式如 error,valid样式进行设计。

此外我们在扩展插件功能中添加了一个class为tip的label标签,该标签仅在校验元素获得焦点时生成。为 此,还需要设置label的tip样式。

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

表单验证效果演示

至此,表单校验的代码编写和插件的应用已经全部完成。

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

标签: jquery validate表单校验html

本文链接地址:https://www.jiuchutong.com/biancheng/383085.html 转载请保留说明!

上一篇:BootStrap glyphicon图标无法显示的解决方法

下一篇:jquery 属性选择器(匹配具有指定属性的元素)(jquery属性选择器,选取所有带href)

  • 缴纳个人所得税会计分录怎么写
  • 什么是印花税的税目
  • 土地增值税可扣除的税金有哪些
  • 异地存货管理
  • 高速路费电子发票怎么打印
  • 车辆购置附加税证丢了能过户吗
  • 法院拍卖土地欠土地使用税
  • 增值税附征优惠政策
  • 工资中的考核罚款会计怎么处理?
  • 工伤费用的伤残补助金属于福利费吗
  • 房屋建筑物评估技术鉴定表
  • 汇总缴纳增值税附加税如何缴纳
  • 建筑业企业包括哪些企业
  • 无法读取金税盘时间版本怎么解决
  • 股票价格变化的原因
  • 固定资产内部调拨流程
  • 社保和医保是分开到账吗
  • 银行利息收入的账务处理
  • 固定资产转投资性房地产是会计政策变更吗
  • 质量扣款入什么科目
  • 外购固定资产对账怎么算
  • 一般纳税人增值税申报表怎么填写
  • 为什么我的win10
  • 现金日记账和银行存款日记账登记
  • win10系统中为什么网络图标不能展开
  • PHP:oci_num_fields()的用法_Oracle函数
  • 银行承兑汇票开出后多久可以签收
  • 潘塔纳尔湿地的成因
  • 调整以前年度管理费用会计分录
  • 应酬用的香烟
  • 公众号 企业
  • php中strstr
  • 安装windows(install windows)
  • 普通发票的开票规定
  • html盒子边框圆角
  • node 文件
  • 往来款的账务处理
  • 小企业投资款怎么做账
  • 投资款印花税的计税依据
  • 减免增值税要计入营业外收入
  • 国外差旅费怎么入账
  • 主要业务是生产销售家电
  • 物业公司物业费计入什么会计科目
  • 货先到发票后到怎么办
  • 年终奖可以税前扣除吗
  • 会计记账凭证的填制要求
  • 转账支付水电费
  • 印花税记入哪个费用
  • 企业收到宣传费怎么做账
  • 购买空调报销写什么科目的
  • 研发费用如何做账
  • 加油站汽油损耗分析
  • 个人购汇需要申报吗
  • 财务章和公章的样式区别图片
  • 创建小企业
  • 没有期初数据会怎么样
  • sql入门课程
  • sql2005 create file遇到操作系统错误5拒绝访问 错误1802
  • sql server存储过程教程
  • MySQL利用视图查询员工进货数量要求输出姓名进货数量
  • win10系统升级后c盘满了
  • winkey.exe - winkey是什么进程
  • winmysqladmin.exe - winmysqladmin进程是什么意思
  • win1021h2正式版发布日期
  • ubuntu设置登录用户
  • 查看端口信息命令
  • shwicon.exe - shwicon是什么进程 有什么用
  • win8.1开始菜单怎么改成win7那样
  • win10周年版
  • cocos2d游戏源码
  • js实现隔行变色
  • JavaScript实现Base64编码转换
  • node.js怎么搭建服务器
  • c# 抽象类的作用
  • JavaScript浏览器插件制作
  • 安卓网络管理类app
  • 个人取得抽奖,购车抵用,需要缴纳个人所得税吗
  • 涉税服务业务是什么
  • 十大上海企业纳税排行榜
  • 职工周转房需要缴纳房产税吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设