如何用jquery进行表单验证(jQuery实现发送验证码控制按钮禁用功能)
类别:编程学习 浏览量:1958
时间:2021-09-29 03:48:56 如何用jquery进行表单验证
jQuery实现发送验证码控制按钮禁用功能需求效果:点击发送验证码之后,按钮禁用,5秒之后取消禁用。
效果图如下:
点击发送之后禁用按钮
5秒之后取消禁用,重新发送
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <input type="text"> <input type="button" value="发送"> <script src="js/jquery-1.12.4.min.js"></script> <script> // 获取元素 var $btn = $("input:button") // 添加按钮的点击事件 $btn.click(function () { // 定义一个变量存储时间的数字 var n = 5; // 让按钮被禁用 // 替换按钮的文字内容 $(this).prop("disabled",true).val(n + "s 后重新发送") // 每隔 1s 更改倒计时内容 // 通过定时器进行每隔 1s 减时间效果 var timer = setInterval(() => { n--; // 文字内容发生变化 // 定时器内部的this指向的默认为 window $(this).val(n + "s 后重新发送") // 判断如果时间到了 0 ,就要停止定时器 if (n <= 0) { clearInterval(timer) // 5s 结束后,需要让文字恢复 发送 // 让按钮取消禁用 $(this).val("重新发送").prop("disabled",false) } },1000) }) </script> </body> </html>
到此这篇关于jQuery实现发送验证码控制按钮禁用功能的文章就介绍到这了,更多相关jquery控制按钮禁用内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- jquery中find()与filter()的区别
- jquery如何优化
- Uncaught TypeError: jQuery.handleError is not a function
- jquery的动画效果api(jQuery框架实现元素显示及隐藏三种动画方式)
- jquery如何实现倒计时
- jquery实现聚光灯效果
- jquery中is()
- jQuery给动态添加的元素绑定事件
- jquery实现微信中长按识别二维码
- jquery脚本检测密码强度
- JQuery中serialize()
- jquery deferred对象
- Jquery对数组的操作
- jquery的直接设置下拉框的选中值(jquery实现户籍地选择下拉框)
- jQuery邮箱自动补全
- jquery中wrap、wrapAll、wrapInner
- 男人犯的错,为什么要女人来承担(为什么要女人来承担)
- 心理学 四个金蟾,哪个最招财 测你今生的运势有多棒(心理学四个金蟾)
- 吉善缘《聚宝金蟾》金蟾招财摆件 三足全铜蟾蜍客厅店铺开业礼品(吉善缘聚宝金蟾金蟾招财摆件)
- 招财化煞神兽,金蟾变了(招财化煞神兽金蟾变了)
- 26岁杨紫的白素贞遇上24岁鞠婧祎,哪个最美(26岁杨紫的白素贞遇上24岁鞠婧祎)
- 鞠婧祎和杨紫两种风格的女生,你心里谁比较美(鞠婧祎和杨紫两种风格的女生)
热门推荐
- laravel后台登录教程(Laravel 默认邮箱登录改成用户名登录的实现方法)
- 云主机和免备案空间(租用国内免备案云服务器空间靠谱吗?)
- nginx文件夹限制ip访问(基于Nginx实现限制某IP短时间访问次数)
- laravel框架保存数据(Laravel 数据库加密及数据库表前缀配置方法)
- typescript开发后端(教你使用webpack打包编译TypeScript代码)
- vue3组件通讯消息(Vue3实现Message消息组件示例)
- docker socket文件丢失(解决vscode docker插件docker.socket权限问题)
- MySQL 8.0.19安装详细教程(windows 64位)(MySQL 8.0.19安装详细教程windows 64位)
- css布局详细介绍(浅谈CSS 栅格系统布局原理分析)
- laravel自定义数据库驱动(laravel框架数据库配置及操作数据库示例)