在日常生活使用App或者浏览网页什么的，经常需要我们去进行登录验证身份，可选择的登录方式有很多，在此讲解一下使用手机验证码登录的大致逻辑和部分实现。
思路：
首先，我们必须使用到登录相关的界面（在此使用layui做一个简单的登录界面）
齐次，获取验证码(本文内的电话全使用一个随机的号码测试)
之后，我们需要进行相应的逻辑功能实现（有的在前端界面就可以实现，有点需要使用到后端程序）
最后，当验证码正确时，允许登录，并通过手机号码从数据库查询用户信息用于用户的其他界面的操作。
1.简单的前端界面
页面视图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>手机短信登录</title>
<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="static/css/login.css"/>
</head>
<body>
<div class="login-box">
<form class="layui-form" action="">
<legend>手机号登录</legend>
<div class="layui-form-item">
<div class="layui-inline iphone">
<div class="layui-input-inline">
<i class="layui-icon layui-icon-cellphone iphone-icon"></i>
<input name="userPhone" class="layui-input" id="phone" type="tel" placeholder="请输入手机号" autocomplete="off" lay-verify="required|phone">
</div>
</div>
<div class="layui-form-mid layui-word-aux" id="tip" style="color:red !important;">请输入手机号</div>
<div class="layui-inline veri-code">
<div class="layui-input-inline">
<input name="pnum" class="layui-input" id="pnum" type="text" placeholder="请输入验证码" autocomplete="off" lay-verify="required" maxlength="6">
<button class="layui-btn" id="find" type="button">验证码</button>
</div>
</div>
</div>
<div class="layui-form-item login-btn">
<div class="layui-input-inline">
<button class="layui-btn" onclick="return false" lay-filter="login" lay-submit="">登录</button>
</div>
</div>
</form>
</div>
<script src="static/js/jquery3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script src="static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//使用layui
layui.use([ 'form' ,'layer'], function() {
var form = layui.form;
var layer = layui.layer;
});
</script>
</body>
</html>因为只是一个短信验证的功能，于是只做一个简单的登录模板。
在做出登录模板之后，我们需要对模板内容进行一些简单的处理，例如对手机号码进行一个简单的判断（可以使用正则表达式）
以下代码只在js部分进行增加内容样式，页面html部分未进行修改
视图：
代码：
<script type="text/javascript">
//使用layui
layui.use([ 'form' ,'layer'], function() {
var form = layui.form;
var layer = layui.layer;
//表单验证
form.verify({
phone : [ /^1[35897][0-9]{9}$/, '请填写正确的手机号格式!' ]
});
});
</script>现在我们就可以开始获取输入框中的电话号码进行短信验证了。
视图：
代码：
<script type="text/javascript">
//使用layui
layui.use([ 'form', 'layer' ], function() {
var form = layui.form;
var layer = layui.layer;
//表单验证
form.verify({
phone : [ /^1[35897][0-9]{9}$/, '请填写正确的手机号格式!' ]
});
//获取到发送短信验证的按钮
$("#find").click(function() {
alert('OK，输入正确，可以发送短信');
//使用ajax请求Servlet
$.post('UserServlet/sendMsg.do', {
'userPhone' : inputPhone
}, function(res) {
alert(res);
}, 'json');
});
});
</script>使用ajax将前端的电话号码传递到后端，后端获取内容。
UserServlet内容
package com.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.service.UserService;
import com.util.JsonTool;
import com.util.ResultModel;
@WebServlet("/UserServlet/*")
//此处继承的是自己封装的封装类，使得可以在一个servlet中实现多种“行为”
public class UserServlet extends BaseServlet {
private static final long serialVersionUID = 1L;
UserService userService=new UserService();
// UserServlet/sendMsg.do
protected void sendMsg(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置编码格式
request.setCharacterEncoding("utf-8");
//获取数据
String userPhone=request.getParameter("userPhone");
//检查数据
System.out.println("检查：userPhone="+userPhone);
//layui中渲染模板的特定格式，虽然此处没用到，不是必须，但是暂时还是使用这个封装类
ResultModel resultModel=userService.sendMsgToPhone(userPhone);
//将结果返回给ajax的回调函数
//JsonTool也是封装工具类（用途是将数据转化为json格式，并且将数据传递到前端）
JsonTool.sendJsonStr(response, JsonTool.objectToJson(resultModel));
}
}
Service内容
package com.service;
import org.apache.commons.httpclient.HttpClient;
import org.apache.commons.httpclient.NameValuePair;
import org.apache.commons.httpclient.methods.PostMethod;
import org.dom4j.Document;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;
import com.util.ResultModel;
public class UserService {
// 因为判断手机号是否是已经注册过的用户
// 在前端ajax表单验证的时候判断
// 此方法不需要连接数据库
public ResultModel sendMsgToPhone(String userPhone) {
try {
ResultModel resultModel=new ResultModel();
// 请求地址
String reqPath = "https://106.ihuyi.com/webservice/sms.php?method=Submit";
// 去连接这个支持发送短信平台网站
HttpClient client = new HttpClient();
PostMethod method = new PostMethod(reqPath);
client.getParams().setContentCharset("GBK");
method.setRequestHeader("ContentType", "application/x-www-form-urlencoded;charset=GBK");
int mobile_code = (int) ((Math.random() * 9 + 1) * 100000);
String content = new String("您的验证码是：" + mobile_code + "。请不要把验证码泄露给其他人。");
System.out.println(content);
NameValuePair[] data = { // 提交短信
new NameValuePair("account", "******"), // 查看用户名 登录用户中心->验证码通知短信>产品总览->API接口信息->APIID
new NameValuePair("password", "**********"), // 查看密码 登录用户中心->验证码通知短信>产品总览->API接口信息->APIKEY
// new NameValuePair("password", util.StringUtil.MD5Encode("密码")),
new NameValuePair("mobile", userPhone), new NameValuePair("content", content), };
method.setRequestBody(data);
client.executeMethod(method);
String SubmitResult = method.getResponseBodyAsString();
// System.out.println(SubmitResult);
Document doc = DocumentHelper.parseText(SubmitResult);
Element root = doc.getRootElement();
String code = root.elementText("code");
String msg = root.elementText("msg");
String smsid = root.elementText("smsid");
System.out.println(code);
System.out.println(msg);
System.out.println(smsid);
if ("2".equals(code)) {
System.out.println("短信提交成功");
resultModel.setCode(2);
System.out.println("短信发送成功，请查看手机");
resultModel.setData(mobile_code);//接受到的验证码
}
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
Service层中使用到了第三方(互亿无线)的内容(当然要添加相应的依赖)，只需会复制粘贴以及使用即可。需要注意的地方是上面打星号的内容，那个地方是需要修改的。
视图：
代码：
<script type="text/javascript">
//使用layui
layui.use([ 'form', 'layer' ], function() {
var form = layui.form;
var layer = layui.layer;
//表单验证
form.verify({
phone : [ /^1[35897][0-9]{9}$/, '请填写正确的手机号格式!' ]
});
//获取到发送短信验证的按钮
$("#find").click(function(){
$('#pnum').removeAttr('readonly');//让输入框可以输入
//获取填写的手机号
var inputPhone=$("#phone").val();
//判断填写的是不是一个手机号号码
if(/^1[35897][0-9]{9}$/.test(inputPhone)){
alert('OK，输入正确，可以发送短信');
//使用ajax请求Servlet,目的获取到你手机上接收到的6位数的验证码
$.post('UserServlet/sendMsg.do',{'userPhone':inputPhone},function(res){
console.info(res);
},'json');
}else{
alert('手机号码格式不正确')
}
});
});
</script>然后我们为按钮定义一个函数（当未输入正确的验证码时，登录键禁用，当单击验证码按钮后，验证码键禁用）
然后为发送验证码的按钮设置倒计时功能，避免资源被持续占用
代码：
<script type="text/javascript">
//设置按钮的状态
function fun_changebtn(selector, flag, content) {
if (flag) {
//启用
$(selector).removeAttr('disabled');
//改变颜色
$(selector).attr('class', 'layui-btn layui-bg-green')
} else {
//禁用
$(selector).attr('disabled', 'disabled');
$(selector).attr('class', 'layui-btn layui-bg-gray')
}
$(selector).html(content); //按钮显示的内容
}
function fun_tip(color,content){
$("#tip").html('<span style="color:'+color+';">'+content+'</span>');
}
//使用layui
layui.use([ 'form' ,'layer'], function() {
var form = layui.form;
var layer = layui.layer;
//表单验证
form.verify({
phone : [ /^1[35897][0-9]{9}$/, '请填写正确的手机号格式!' ]
});
//禁用登录按钮，只有填入正确信息后才会改变按钮状态
fun_changebtn('.login-btn button',false,'禁用,填写短信验证');
$("#phone").change(function(){
fun_changebtn('#find', true, '验证码'); //启用按钮
$('#pnum').val('');
fun_tip('green','请重新点击验证码按钮');
fun_changebtn('.login-btn button',false,'禁用,填写短信验证');
});
//获取到发送短信验证的按钮
$("#find").click(function(){
$('#pnum').removeAttr('readonly');//让输入框可以输入
//获取填写的手机号
var inputPhone=$("#phone").val();
//判断填写的是不是一个手机号号码
if(/^1[35897][0-9]{9}$/.test(inputPhone)){
alert('OK，输入正确，可以发送短信');
var mobile_code='';
//使用ajax请求Servlet,目的获取到你手机上接收到的6位数的验证码
$.post('UserServlet/sendMsg.do',{'userPhone':inputPhone},function(res){
console.info(res);
if(res.code==2){
mobile_code=res.data;
}
},'json');
var myTimer; //使用计时器实现倒计时功能
//将用户输入的验证码和Servlet返回给我们mobile_code的比较
$("#pnum").keyup(function(){
var inputCode=$(this).val();
if(inputCode.length==6){
if(inputCode == mobile_code){
//清除这个计时器
clearInterval(myTimer);
//验证码验证成功
fun_tip('green','短信验证成功!'); //显示提示信息
$('#pnum').attr('readonly','readonly');//输入框不让输入
fun_changebtn('#find', false, '<i class="layui-icon">စ</i>');//禁用验证码按钮
fun_changebtn('.login-btn button', true, '登录');
return;
}else{
//验证码验证失败
fun_tip('red','验证码输入错误!'); //显示提示信息
$('#pnum').removeAttr('readonly');//让输入框可以输入
}
}
});
//禁用按钮
fun_changebtn('#find', false, '验证码');//禁用验证码按钮
var second=15;
//创建一个计时器，每个1秒中执行一次函数
myTimer=setInterval(function(){
console.info(second);
$('#find').html(second+"s");
if(second==-1){
//清除这个计时器
clearInterval(myTimer);
fun_tip('red','重新点击按钮发送短信验证!'); //显示提示信息
fun_changebtn('#find', true, '验证码'); //启用按钮
$('#pnum').val('');
$('#pnum').attr('readonly','readonly');
mobile_code='';
}
second--;
},1000);
}else{
fun_tip('red','手机号格式不正确!');
}
});
});
</script>至此，验证码功能可以实现。
999
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
