jQuery-获取验证码
1.案例
获取验证码选用模拟一号店登录页面。其有css、HTML、js三部分组成。
2.效果图
1.页面初始效果图
2.点击获取验证码时效果图
3.读秒结束后的效果图
3.实现思路
其中的表单验证在这里我们用H5验证。
准备:创建触发条件,点击同意协议并注册按钮触发。(即点击事件)
第一步:通过选择器(getElementById)找到相应的input框赋给自己声明的变量A。
第二步:用if判断,条件为(A.validity.valueMissing===true);意思是判断A是否为空,空为true反之false;然后提示信息(setCustomValidity)返回不能为空,第二个条件为(A.validity.patternMissing===true);意思是判断正则表达式是否符合,符合为true反之false;然后提示信息(setCustomValidity)返回错误。如果两者都为false则正确即提示信息(setCustomValidity)返回空(即通过)。
第三步:确认密码:获取两个input的值判断即可;
点击获取按钮后,前方input赋上四位验证码并开始读秒一分钟,一分钟后按钮文本变为重新发送
其中读秒时按钮禁用即点击无效。
第一步:声明秒数初始值a为一分钟即60秒及定时函数b。
第二步:创键获取验证码的点击事件。
第三步:先声明一个字符串c在用循环赋给a四位的随机数最后将c赋给前方的验证码input框。
第四步:先封装一个函数d在其里面写验证码的读秒功能。
第五步:定义定时函数b,调用函数d每1000毫秒执行一次。
第六步:函数d为:a自减一 并判断如果a大于0则一直改变它的值并禁止点击按钮。否则清除禁止、初始值重新为60并且值改变为重新发送并清除定时函数。
4.代码
注:css与js皆是外部引入
1.CSS
*{margin: 0;padding: 0;
}
a{text-decoration: none;color: gray;
}
/*头部*/
.header_zhu{padding: 15px;border-bottom: 1px solid #5a525f;box-shadow: 1px 2px 15px 4px #8080806e;
}
.header_tui{display: inline-block;margin-left: 970px;
}
.header_zhu img{display: inline-block;vertical-align: middle;
}
.header_zhu p{display: inline-block;font-size: 13px;vertical-align: middle;height: 70px;line-height: 70px;
}
.header_zhu p a{color: dodgerblue;
}
.header_right{display: inline-block;border: 1px solid gray;position: relative;top: 3px;
}
.header_right span a{color: black;
}
/*主体*/
section{text-align: center;
}
.The_title{padding: 30px 0 20px 0;
}
.input_1{width: 252px;height: 45px;line-height: 45px;padding-left: 15px;margin: 5px 0;
}
span{font-size: 12px;margin-right: 40px;display: inline-block;margin-bottom: 5px;color: gray;
}
span a{color: dodgerblue;
}
.input_2{width: 146px;height: 45px;line-height: 45px;padding-left: 15px;margin: 5px 0;
}
.input_3{width: 101px;height: 48px;line-height: 48px;background: #56565e;border: 0;color: white;font-size: 12px;font-weight: bold;
}
.input_4{width: 272px;height: 42px;line-height: 42px;padding-left: 15px;margin: 5px 0;font-size: 13px;color: white;background: #ff3c3c;border: none;
}
/*尾部*/
.footer_first p a{color: rgba(0, 0, 0, 0.65);font-size: 12px;
}
.footer_first{padding-top: 12px;text-align: center;
}
2.HTML
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册</title><link rel="stylesheet" href="css/registered.css"><script src="js/jquery-1.12.4.js"></script><script src="JS外部/registered.js"></script>
</head>
<body>
<header><div class="header_zhu"><img src="data:images/loginlogo.jpg" alt=""><div class="header_tui"><p>你好!欢迎光临1号店 <a href="#">请登录</a></p><div class="header_right"><a href="#"><img src="data:images/runbun.png" alt=""></a><span><a href="#">帮助中心</a></span><a href="#"><img src="data:images/turnb.png" alt=""></a></div></div></div>
</header>
<section><div class="section_first"><h1 class="The_title">一号店注册</h1><form action="Index.html" method="post"><p><input type="text" name="Mobile phone no" required pattern="1\d{10}" placeholder="手机号"class="input_1" id="phone"></p><p><input type="text" name="Mobile phone no——yanZhEng" placeholder="验证码" class="input_2"><input type="button" name="Verification code" value="获取验证码" class="input_3"></p><p><input type="password" name="password" required class="input_1" placeholder="设置密码" id="pass1" pattern="\d{6,10}"></p><p><input type="password" name="password-a" placeholder="确认密码" class="input_1" id="pass2"></p><span>点击注册,表示您同意1号店<a href="#">《服务协议》</a></span><p><input type="submit" value="同意协议并注册" name="tiJiaO" class="input_4"></p></form></div>
</section>
<footer><div class="footer_first"><p><a href="#">沪ICP备13044278号|</a><a href="#">合字B1.B2-20130004|</a><a href="#">营业执照</a></p><p><a href="#">Copyrightc1号店网上超市2007-2016,All Rights Reserved</a></p></div>
</footer>
</body>
</html>
3.JS 注:jQuery库用的是1.12.4版本的。
$(document).ready(function () {$(".input_4").click(function () {//手机号var phone = document.getElementById("phone");if (phone.validity.valueMissing===true){phone.setCustomValidity("手机号不能为空!");} else if (phone.validity.patternMismatch===true){phone.setCustomValidity("手机号错误!");}else{phone.setCustomValidity("");}//设置密码var pass = document.getElementById("pass1");if (pass.validity.valueMissing === true){pass.setCustomValidity("密码不能为空!");}else if (pass.validity.patternMismatch === true){pass.setCustomValidity("密码错误!");}else{pass.setCustomValidity("");}//确认密码mia();//调用方法//封装成方法function mia() {var number1 = document.getElementById("pass1");var number2 = document.getElementById("pass2");if (number1.value!==number2.value){number2.setCustomValidity("密码不一致!");}else{number2.setCustomValidity("");}}});//验证码var minth = 60;//秒数初始值var mytime;//定时函数$(".input_3").click(function () {//点击事件var str;str="";for (var i = 0; i < 4; i++) {var j = Math.floor(Math.random()*10);//向下取整str+=j;//累加}$(".input_2").val(str);//文本mytime = setInterval(fn,1000);//封装一个倒计时方法function fn() {minth = --minth;if (minth>0){//还没有倒计时结束$(".input_3").val('('+minth+'秒)后重发').attr("disabled","disabled");}else{//倒计时结束$(".input_3").removeAttr("disabled");minth = 60;//重新初始化$(".input_3").val('重新发送');clearInterval(mytime);//清除定时函数}}});
});
jQuery-获取验证码相关推荐
- jQuery 点击获取验证码,倒计时30秒
//HTML: <div class="layui-form-item"> <input class="layui-yanzheng" ...
- 免费获取验证码60秒倒计时
免费获取验证码60秒倒计时 <!DOCTYPE html> <html> <head> <script src="http://libs.baidu ...
- Jquery实现验证码功能 完美效果 jsp php 页面均可调用
目录 验证码实现效果如下: 生成验证码的方法: 生成验证码随机背景颜色 在html中引用 完整源码下载地址: 验证码实现效果如下: 生成验证码的方法: function code_draw() {va ...
- Java中IDEA,Springboot实现手机获取验证码和倒计时
问题一:我现在点击获取手机验证码,虽然现实正在发送 但是手机接收不到验证码 我试了很多 也不知道哪的问题 我们使用的是榛子云短信平台, 官网地址:http://smsow.zhenzikj.com 已 ...
- 倒计时到0停止,用在手机获取验证码的倒计时
<input type="text" placeholder="填写验证码" class="check1 "/><butt ...
- 发送手机短信获取验证码功能
因为移动端的方便,现在网络上很多的网站与应用都有与实现用户手机绑定的功能.这样做的好处很多,例如账号登陆.修改密码.在线支付--等功能模块都可以与手机实时获取验证码短信结合,来确保用户的安全性操作. ...
- html获取验证码(pc端)
html获取验证码代码(pc端) 效果: 已将html代码和css代码和js代码,放在了一起. 我自己引入了jquery,别忘记了. 如果觉得样式不好看可以自行调整css. 代码: <!DOCT ...
- 比较全的jQuery网页验证码插件
html jQuery网页验证码插件 数字字母验证码 确定 算数验证码 确定 滑动验证码 拼图验证码 点选验证码 verify.css /*常规验证码*/ .verify-code { font-si ...
- 微信小程序获取验证码倒计时
实现效果图 使用方法: setInterval demo:(如果对 setInterval不了解的可以先百度下) xml 中写一个按钮: <view class="container& ...
- 【转】jQuery获取Select option 选择的Text和Value
获取一组radio被选中项的值:var item = $('input[name=items][checked]').val(); 获取select被选中项的文本:var item = $(" ...
最新文章
- Dubbo入门Demo
- IE11 F12 开发人员工具 查看 Cookie
- .NET : 再谈谈多线程
- HIbernate实现增、删、改、查。
- Linux下IO多路复用之select函数的使用
- 4 int.parse方法调用问题和同行评审
- wordpress绿色小清新运营笔记博客主题模板
- 国内外独立IP行情及网站用独立IP优势面面观
- SQL left join 、right join 、inner join
- javascript学习之对象基础
- Bootstrap:弹出框和提示框效果以及代码展示
- mysql远程连接打不开_MySql远程连接无法打开解决办法
- Python 基础 —— re:正则表达
- linux翻转字符串
- 大数据分析是如何工作
- 高校后勤管理系统java代码_《高校后勤管理系统的设计与实现》论文笔记二
- android root工具排行榜,可root任何机?史上最强安卓root工具出炉
- 计算机组装大赛活动感悟,计算机组装大赛总结参考
- C语言实现拟合直线方程
- 已有的事,后必再有。已行的事,后必再行。