表单提交(手机验证码60s倒计时)
来源:互联网 发布:淘宝tv订单是什么意思 编辑:程序博客网 时间:2024/05/16 18:25
发送手机验证码60s倒计时,然后提交表单的例子在现在是很常见的了,刚好项目里面用到了一个,就做个积累吧,基于sui框架的表单提交。
html代码如下:
<!DOCTYPE html>
<#include "/ftl/common/base.ftl"><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>绑定手机号</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <link rel="shortcut icon" href="/favicon.ico"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"> <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css"> <link rel="stylesheet" href="${URLPrefix.statics}/css-sui/base.css"> <link rel="stylesheet" href="${URLPrefix.statics}/css-sui/my/login.css"></head><body><div class="page-group"> <div class="page page-current"> <!--header start--> <header class="bar bar-nav headerBar"> <a class="icon icon-iconfontback pull-left back"></a> <h1 class="title">绑定手机号</h1> </header> <!--header end--> <div class="content"> <div class="list-block loginBox"> <form action="#" method="post" id="bindPhone" name="bindPhone"> <ul> <!-- Text inputs --> <li> <div class="item-content"> <div class="item-inner"> <div class="item-title label">手机号</div> <div class="item-input"> <input type="text" placeholder="请输入手机号码" class="userTel" value="" name="mobile" id="mobile"> </div> </div> </div> </li> <li> <div class="item-content"> <div class="item-inner"> <div class="item-title label">验证码</div> <div class="item-input"> <input type="text" placeholder="请输入验证码" class="userCode" value="" maxlength="20" name="verifyCode" id="verifyCode"> </div> <input type="hidden" value="${unionLoginId!''}" name="unionLoginId" id="unionLoginId"> <input type="hidden" value="${returnUrl!''}" name="returnUrl" id="returnUrl"> <div class="item-button"> <button class="red button" id="msg-num-btn" type="button">获取验证码</button> </div> </div> </div> </li> </ul> </div> <div class="content-block"> <div class="row"> <div class="col-100"><input type="button" value="确认绑定" id="bind" class="button button-big button-fill button-danger disabled"></div> </div> </div></form> </div> </div> </div><script src="${URLPrefix.statics}/js/base/require.js" data-main="${URLPrefix.statics}/js-sui/my/bindPhone"></script></body></html>其中form标签需要包裹住所有需要提交的信息部分。
js代码如下:
require.config({ paths: { "base": "../../js/base/base", "template": "../../js/base/template" }});define(['base','template'], function (base,template){ function sendVerifyCode() { $.ajax({type: "POST",dataType: "json",url: URLPrefixJs.statics+"/login/sendRegisterVerifyCode.do",data: "mobile="+$('#mobile').val(),success: function(data){if (data=="0"){$.toast('发送短信成功,请注意接收');var countdown=59;var o=$("#msg-num-btn");var iCount = setInterval (function () {o.text(countdown-- +"s后重试");o.addClass("disabled");if(countdown==0){ o.removeClass("disabled"); o.text("获取验证码"); clearInterval(iCount);//清除倒计时 countdown=60;//设置倒计时时间 };}, 1000);} else if (data=="005") {$.toast('发送短信间隔需大于60秒');} else {$.toast('发送短信失败,请重试');}}}); } $("#msg-num-btn").click(function(){ var d = $(this); if(d.hasClass("disabled")){ return; }if($(".userTel").val()==""){ $.toast('未填写手机号', 2000) return false; } sendVerifyCode(); }); function checkMobile(){ var mobileReg = /^(13|14|15|17|18)[0-9]{8}[0-9]$/; var mobile = $('#mobile').val(); if(!mobileReg.test(mobile)){ $.toast('未输入手机号或手机格式有误'); return false; } return true; } function checkVerifyCode(){ var verifyCodeReg = /^[0-9]{6}$/; var verifyCode = $('#verifyCode').val(); if(!verifyCodeReg.test(verifyCode)){ $.toast('未输入验证码或验证码格式有误'); return false; } return true; } $('#bind').click(function(){ var d = $(this); if(d.hasClass("disabled")){return false;}if (!checkMobile()){return false;}if (!checkVerifyCode()){return false;}$.ajax({type: "POST",url: URLPrefixJs.statics+"/unionLogin/unionLoginByMobile.do",dataType: "json",data: $('#bindPhone').serialize(),success: function(data){if (data.code=="0") {window.location=$('#returnUrl').val();} else if (data.code=="002") {$.toast('手机号已被注册');} else if (data.code=="003") {$.toast('验证码过期');} else if (data.code=="004") {$.toast('验证码不正确');} else if (data.code=="100") {$.toast('联合登录失败');} else if (data.code=="101") {$.alert(data.msg,function(){window.location=URLPrefixJs.statics+"/login/toLogin.do";});}}});}); var timer=-1; $(".userTel,.userCode").bind("keyup",function(event){ var val=$(this).val(); var mobileReg = /^(13|14|15|17|18)[0-9]{8}[0-9]$/; var mobile = $('#mobile').val(); var verifyCodeReg = /^[0-9]{6}$/; var verifyCode = $('#verifyCode').val(); if(mobileReg.test(mobile)&&verifyCodeReg.test(verifyCode)){ $("#bind").removeClass("disabled"); return true; }else{ $("#bind").addClass("disabled"); return false; } })});而且只有在所有信息都输入正确的情况下,提交按钮才会可用,其他情况下都是禁用的。
1 0
- 表单提交(手机验证码60s倒计时)
- 手机验证码倒计时
- jquery 获取验证码倒计时60s
- 常见获取验证码倒计时60s
- vue 验证码倒计时60s
- vue 验证码倒计时60s
- vue 验证码倒计时60s
- 60s手机验证码(源码)
- 发送手机验证码倒计时
- CastApp手机验证码倒计时
- 手机验证码倒计时js
- 短信获取验证码==倒计时60s
- 微信小程序开发--倒计时60s获取验证码
- 获取验证码倒计时60s--前端案例
- 表单按钮倒计时 》验证码 jQuery&&JavaScript
- 点击按钮,实现60秒倒计时效果(发送手机验证码)
- button倒计时,发送手机验证码可用
- 手机获取验证码的倒计时效果
- java 调用 ffmpeg 进行视频转换以及截图
- C++侵入式智能指针的实现
- 【腾讯Bugly经验分享】程序员的成长离不开哪些软技能?
- 动画系列(一)UIDynamic
- SDAutoLayout
- 表单提交(手机验证码60s倒计时)
- 1056. 组合数的和(15)
- 【Unity3D 打斗游戏开发】之一 普通攻击敌人判断
- Java 动态代理作用是什么?
- mac上使用 crontab 定时执行python脚本
- 常用的正则表达式
- Lightoj1002——Country Roads(最短路变形)
- iOS中的定时器
- repo使用