短信验证

最新推荐文章于 2024-01-10 14:58:44 发布

Zgq弟弟

最新推荐文章于 2024-01-10 14:58:44 发布

阅读量114

点赞数

分类专栏： Java Web 短信验证文章标签：短信验证

本文链接：https://blog.csdn.net/qq_37447749/article/details/102503840

版权

Java Web 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

短信验证

2 篇文章 0 订阅

订阅专栏

聚合数据

配置参数：

tpl_id: ''
tpl_value: '#code#=',
key:''

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<style type="text/css">
			.msgTest {
				margin: 0 auto;
				width: 25vw;
				margin-top: 25vh;
			}
		</style>
	</head>

	<body>
		
		<div class="msgTest">
			<h1 style="margin-left: 50px;"><span style="color: red;">短信验证码测试</span></h1>
			<form class="layui-form layui-form-pane" action="">
				<div class="layui-form-item">
					<label class="layui-form-label">手机号</label>
					<div class="layui-input-inline">
						<input type="text" name="phone" lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-inline" style="width: 57%;">
						<input type="text" name="verify" lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
					</div>
					<label class="layui-form-label" id="verify-click">获取验证码</label>
				</div>
			</form>
		</div>
	</body>
	<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script>
		layui.use(['element', 'jquery', 'layer', 'form'], function() {
			var $ = layui.jquery;
			var form = layui.form;
			var layer = layui.layer;

			$('#verify-click').click(function() {
				var seconds = 60;
				if(seconds == 0 || seconds == 60) {
					$.ajax({
						url: "http://v.juhe.cn/sms/send?callback=dosomething",
						type: 'post',
						data: {
							mobile: $('[name="phone"]').val(),
							tpl_id: 191180,
							tpl_value: '#code#=zgq1314',
							key:'26ce8db234bca929bf9fb572c910cedd'
						},
						async: false,
						dataType: 'json/xml',
						dosomething: function(status) {
							layer.alert(status);
						}
					});
				}
				$('#verify-click').text('已发送(' + (seconds--) + 'S)');
				var time = setInterval(function() {
					$('#verify-click').text('已发送(' + (seconds--) + 'S)');
					if(seconds < 0) {
						clearInterval(time);
						$('#verify-click').text('获取验证码');
					}
				}, 1000);
			});
		})
	</script>
</html>

Zgq弟弟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
短信验证

聚合数据配置参数： tpl_id: '' tpl_value: '#code#=', key:''<%@ page language="java" import="java.util.*" pageEncoding=...
复制链接

扫一扫