位置: 编程技术 - 正文

jQuery Validate表单验证插件的基本使用方法及功能拓展(jquery validate表单内容怎么添加边框)

编辑:rootadmin

推荐整理分享jQuery Validate表单验证插件的基本使用方法及功能拓展(jquery validate表单内容怎么添加边框),希望有所帮助,仅作参考,欢迎阅读内容。

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

1 表单验证的准备工作

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

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

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

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

  对于初学者而言,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表单内容怎么添加边框)

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属性,方便在使用插件时将元素绑定校验规则和校验信息。】

  表单实现代码如下:

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")。下面的代码呈现了如何对表单中的用户名、密码等字段绑定校验规则:

2.3 表单验证css样式

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

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

3 表单验证效果演示

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

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

相关阅读:

jQuery Validate插件自定义验证规则的方法

基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解

JQuery validate插件Remote用法大全

jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法

以上所述是小编给大家介绍的jQuery Validate表单验证插件的基本使用方法及功能拓展,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持!

jQuery操作json常用方法示例 本文实例讲述了jQuery操作json常用方法。分享给大家供大家参考,具体如下:在项目中经常会用到获取json中的某个值,或者动态的创建一个json对象,今

基于jQuery实现火焰灯效果导航菜单 效果描述为:当鼠标经过某一导航选项的时候,后面的背景图片(上图圣诞节后圆角背景)会弹性缓动到该导航选项,如果没有发生单击动作,鼠标移

jquery+ajax实现省市区三级联动效果简单示例 本文实例讲述了jquery+ajax实现省市区三级联动效果。分享给大家供大家参考,具体如下:一直想学习下Ajax,没时间,汗,这借口太牵强了.下了点教程在手机

标签: jquery validate表单内容怎么添加边框

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

上一篇:jQuery.Validate表单验证插件的使用示例详解(jquery validate表单校验)

下一篇:jQuery操作json常用方法示例(jquery 获取json的key)

  • 哪些收据可以入帐
  • 费用报销票跨月跨年可以吗
  • 债权投资产生的利息调整包括哪些内容
  • 处置固定资产产生的净损失
  • 城市维护建设税怎么做分录
  • 51电子发票客户端后使用教程
  • 工程成本控制方法
  • 开票金额和实际金额不一致
  • 本月无销项只有进项申报表如何填写
  • 定率征收多缴的企业所得税怎么计算?
  • 出口退税进项抵扣了不退税可以吗
  • 印花税这个月没交下个月补报可以吗?
  • 外购低值易耗品可以抵扣进项税额吗
  • 现金交易的发票可以认证
  • 施工单位的项目
  • 个人汽车租给公司租金需多少钱?
  • 投资退税申请应怎么写
  • 高亮!这些发票不能抵扣增值税
  • 收取会员费收入会计分录
  • 教育费附加减免性质代码
  • 行政事业单位如何加强内部控制
  • 固定资产的领用
  • 公司开设食堂需要哪些手续
  • 出口退税附加税计税依据
  • 如何恢复回收站永久删除的文件
  • win10专业版下载教程
  • thinkphp 路由
  • 代开专用发票缴纳增值税需要计提吗?
  • 网线插上还是显示红叉
  • 善意取得增值税专用发票 企业所得税
  • 代缴房产税代缴的人要负责吗
  • 个人所得税通过扣缴义务人申报
  • 酒店客房收入怎么算
  • 公司处理固定资产车辆怎么开发票
  • 票据贴现税务处理
  • 应付国库集中支付结余在什么时候确认
  • 批发商和零售商属于
  • vue3.0教程
  • WP Smart Preloader 为你的WordPress添加预加载动画
  • 账载折旧金额填哪个数
  • golang 调用动态库
  • 个税各项减扣标准金额
  • 发票章没有盖好
  • 融资租赁怎么计税
  • 发票丢失如何处理入账
  • 本年利润贷方余额表示盈利还是亏损
  • 外勤会计是做什么的
  • 开具信用证的费用能开专票吗
  • 租赁行业的增值税率
  • 销货清单和发票金额不一致
  • 招待费具体范围包括哪些
  • 防伪税控开票系统SOAP服务端
  • 车辆违章处理有什么规定
  • 非流动资产包括哪些会计科目
  • 营业外收入属于借方还是贷方
  • freebsd怎么用
  • solaris删除文件夹命令
  • wcu.exe是什么
  • win7如何访问xp
  • linux0.12内核代码多少行
  • shell脚本基础教学
  • 微信公众号开发多少钱
  • 在一个android创建一个按钮多选对话框
  • js中变量有哪几种?分别在哪里定义?
  • 深入理解新发展理念,推进供给侧结构性改革
  • 简洁实用的公司治理机制
  • python的iloc
  • js实现字符串和数字对齐
  • 财税专家刘杨简历图片介绍
  • 科技型中小企业认定有效期
  • 怎么查询企业的联系方式
  • 代发工资法律依据
  • 小汽车都交消费税吗
  • 交社保去地税局交吗
  • 个人所得税小孩上大学可以扣除吗
  • 浙江国地税联合申报系统
  • 云南国税申报
  • 发票机如何打印文件
  • 税收优惠政策能调动公众的捐赠积极性
  • 江西国家税务局入围体检名单
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设