html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:social="http://spring.io/springsocial" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="account/layout">
<head>
<title>用户注册-手机验证</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link type="text/css" rel="stylesheet" th:remove="all" href="../../static/web/css/style.css" />
<link type="text/css" rel="stylesheet" th:href="@{/app/web/css/account/style_login.css}" href="../../static/web/css/account/style_login.css" />
<link type="text/css" rel="stylesheet" th:remove="all" href="../../static/web/bootstrap/css/bootstrap.css" />
<script th:src="@{/app/web/js/account/account.register_validata.js}"></script>
<style type="text/css">
.step1 {
background: url(/obiz/app/web/images/1-off.png) no-repeat left 23px;
}
.step2 {
background: url(/obiz/app/web/images/2-on.png) no-repeat left 23px;
}
.step3 {
background: url(/obiz/app/web/images/3-off.png) no-repeat left 23px;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="content" layout:fragment="content">
<div class="container" style="width: 100%;">
<h1>
免费注册
<span>
已经有账号？
<a href="#" th:href="@{/app/account/login.html}">立即登录</a>
</span>
</h1>
<ul class="user_step1">
<li class="step1">填写账户信息</li>
<li class="on_cu step2">验证账户信息</li>
<li class="step3">注册成功</li>
</ul>
<p class="p_title">请选择以下任意一种验证方式：</p>
<div class="phone80">
<a>
<img th:src="@{/app/web/images/phone80-on.png}" src="../../static/web/images/phone80-on.png" />
</a>
<a href="register_validation_email.html" th:href="@{/app/account/mailvalidation.html}">
<img th:src="@{/app/web/images/letter80-off.png}" src="../../static/web/images/letter80-off.png" style="margin-left: 40px;" />
</a>
</div>
<form method="POST" th:action="@{/app/account/mailvalidation}" data-parsley-validate="true" class="form-horizontal"
style="width: 60%; margin-top: 40px; margin-left: 250px;">
<div class="control-group">
<label class="control-label" for="inputEmail">手机号码：</label>
<div class="controls">
<input name="mobile" type="text"></input>
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="button" data-toggle="modal" data-target="#example" class="btn" style="width: 220px; margin-top: 10px;" value="下一步" />
</div>
</div>
</form>
<div id="example" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>短信获取验证码</h3>
</div>
<div class="modal-body">
<p class="p_title" style="width:80%; margin: 0 auto; margin-top:30px; color:#999;">短信已发送到您的手机，请填写短信中的验证码（此项服务免费）</p>
<p class="p_title" style="width:80%; margin: 0 auto; margin-top:30px;color:#333; ">您的手机号码：<span style="color:#999;" id="mobile">12345678901 </span><a class="a_tel">更换手机号码</a></p>
<input name="mobilecode" id="mobilecode" type="text" />
<input type="button" id="btnSendCode" name="btnSendCode" value="免费获取验证码"/>
</div>
<div class="modal-footer">
<input id="mobilevabtn" type="button" class="btn" style="width:140px; margin:20px 0 0 160px;" value="验证"/>
<a href="#" class="btn" data-dismiss="modal">关闭</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
js
$(document).ready(function(){
var InterValObj; //timer变量，控制时间
var count = 60; //间隔函数，1秒执行
var curCount;//当前剩余秒数
$("#btnSendCode").click(function(){
curCount = count;
var mobileval = $("#mobile").text();
if(mobileval != ""){
$("#btnSendCode").attr("disabled", "true");
$("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器，1秒执行一次
// 向后台发送处理数据
$.ajax({
type: "POST", // 用POST方式传输
dataType: "json", // 数据格式:JSON
url: "/obiz/app/account/registermobiledendcode", // 目标地址
data: {mobile:mobileval},
complete : function(data){
if(data.status===200){
//window.location.href = "/obiz/app/account/testhome.html";
}else{
alert(data.responseJSON.message);
//var text = JSON.parse(data.responseText);
//alert(text["message"]);
}
}
});
}else{
alert("手机号不能为空！");
return false;
}
});
//var codetext = $("#mobilecode");
$("#mobilevabtn").click(function(){
//alert(codetext);
var code = $("#mobilecode").val();
var mobileval = $("#mobile").text();
if(code != ""){
$.ajax({
type: "POST", // 用POST方式传输
dataType: "json", // 数据格式:JSON
url: "/obiz/app/account/registermobilevalidation", // 目标地址
data: {mobilecode:code,mobile:mobileval},
complete : function(data){
if(data.status===200){
window.location.href = "/obiz/app/account/registerfinish.html";
}else{
alert(data.responseJSON.message);
// var text = JSON.parse(data.responseText);
// alert(text["message"]);
}
}
});
}else{
alert("请输入验证码！");
return false;
}
});
//timer处理函数
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);// 停止计时器
$("#btnSendCode").removeAttr("disabled");// 启用按钮
$("#btnSendCode").val("重新发送验证码");
//code = ""; // 清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
}else {
curCount--;
$("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
}
}
});
相关推荐
在网页开发中，用户验证是确保数据安全和用户体验的重要环节，特别是手机验证和验证码功能，它们通常用于注册、登录或重要操作中以确认用户身份。本资源“JQUERY网站手机验证验证码发送特效带倒计时操作功能.zip”...
7. **测试与优化**：在实际部署前，务必进行详尽的测试，确保在各种情况下手机验证功能都能正常工作。同时，收集用户反馈，对注册流程进行优化，提高用户体验。 通过以上步骤，你可以在Discuz! X3.2论坛上实现手机...
在手机验证部分，代码会针对手机号码的格式进行验证，确保输入的是有效的电话号码。对于中国大陆，这可能涉及到11位数字的检查，以及特定的前缀（如13、14、15、17、18开头）。一个简单的验证规则可能是`/^1[3-9]\d...
三星手机验证教程主要涵盖多个方面，旨在帮助用户确保所购买的三星手机是全新的或无问题的设备。以下是一些关键的验证步骤： 1. **外观检查**：在购机验机时，需仔细查看手机屏幕内外是否有划痕、尘埃或印痕。检查...
《UCH1.5手机验证插件：深入了解与应用》 手机验证插件是现代移动应用开发中的重要组成部分，尤其在用户注册、账户安全以及身份验证等环节起到关键作用。"UCH1.5手机验证插件"是这样一款针对手机验证功能进行优化的...
一、手机验证功能详解 手机验证是该插件的核心功能。它允许用户在注册时输入手机号码，然后通过第三方短信服务提供商发送一个验证码到用户的手机上。用户收到验证码后，在指定时间内输入到网站的验证码输入框中，...
很多时候我们在提交表单时都需要对提交的数据进行校验，例如：用户名是否为空，手机格式是否正确...,如果有一项或多项验证不通过，就会给出提示，并不允许表单提交。本人还是初级王，代码写的水平不高，但是还是能...
电脑免费打中国手机和固话，不需要手机验证，简单注册即可： 可免费打往美国，加拿大，中国，新加坡，香港（手机和固话） 可免费打往英国，台湾，澳大利亚（仅限固话） 免费期间从2007年6月15号到2007年9月...
HTML5手机验证抽奖领券代码是一个利用HTML5和jQuery技术构建的互动抽奖应用，它集成了手机验证功能，为用户提供安全、便捷的抽奖体验。在Web开发领域，这样的功能常用于增强用户参与度，提高网站活跃度，尤其适用于...
【标题】：“ECSHOP手机验证”是一个关于电商平台ECSHOP的移动验证功能的讨论，这通常涉及到用户在进行注册、登录或其他敏感操作时，通过手机接收验证码以确保安全性的过程。这个主题旨在帮助开发者和运营者理解并...
### DiscuzX1.5新增后台开关：手机验证登录功能详解 #### 一、概述 在DiscuzX1.5版本中，为了增强网站的安全性和用户体验，官方新增了一个后台开关功能，即“是否启用手机验证登录”。这一特性使得管理员可以在...
在这个“html5手机验证转盘抽奖弹出提示框代码”中，我们将会探讨HTML5如何用于实现手机上的抽奖功能，特别是涉及到的验证和用户交互设计。 首先，HTML5的表单元素和API在用户验证方面起着关键作用。通过`<form>`...
手机验证功能的核心是短信猫（SMS Modem）。短信猫是一种硬件设备，可以连接到服务器并发送或接收短信，模拟手机进行通信。在Discuz!X1.5中，短信猫被用作发送短信验证码的媒介。当用户在注册新账号时，系统会向其...
此外，为了实现手机验证，源码可能包含了与服务器通信的AJAX（异步JavaScript和XML）代码，使用`XMLHttpRequest`对象或者现代浏览器支持的`fetch` API。这通常涉及到发送POST请求，携带用户的手机号码到后端服务器...
手机验证接口通常由第三方服务提供商提供，支持POST和GET请求方式来获取验证码或验证验证码的有效性。 在开发过程中，首先需要了解【接口文档--必须看！！！！.doc】，这是开发者与接口服务提供商交互的关键。文档...
全国全网手机验证短信接口是一种重要的信息技术服务，它主要用于用户注册时的身份验证和订单通知，以确保信息的安全性和用户的真实性。这种接口已经成功地整合了中国移动、中国联通和中国电信这三大国内运营商，实现...
在IT行业中，短信手机验证是一种常见的安全机制，用于确认...通过以上步骤，我们可以实现一个基本的短信手机验证功能。在实际开发中，还需要考虑用户体验、性能优化以及应对各种异常情况，确保服务的稳定性和安全性。
6. 输入验证：用户在应用中输入接收到的验证码，应用通过SDK的验证接口，将手机号、验证码和相关参数传回给服务商进行验证。 7. 验证结果处理：根据服务商返回的验证结果，提示用户验证成功或失败，并进行相应的...