JS关于登录页面使用手机验证码登录

这两天在弄一个项目，登录页面打算用手机验证码登录。

需要使用到 jQuery和 ajax

用于验证手机号码输入框

分别判断以下情况并作出弹窗警告

1：是否为空

2：是否为11位数字

3：是否是13，15,17, 18开头的正确手机号码

输入框下面添加一个获取验证码的按钮，默认为关闭不可点击，

点击后出现倒计时

并调用后台servlet生成一个验证码

在验证上面3种情况之后，得到为正确手机号码后

再将验证码按钮设置为可点击

前端完整代码如下：

<%@ 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>
<title>MOBAN</title>
<link href="<%=path %>/css/user_login_style.css" rel='stylesheet' type='text/css' /><script type="text/javascript" src="<%=path%>/js/jquery-1.7.2.min.js" ></script><script type="text/javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }var countdown=60;  function settime(val) {if (countdown == 0) {  val.removeAttribute("disabled");  val.value="获取验证码";  countdown = 60;  return false;  } else {  val.setAttribute("disabled", true);  val.value="重新发送(" + countdown + ")";  countdown--; }setTimeout(function() {  settime(val);    },1000);  }function  code(){$.ajax({type: "POST", //用POST方式传输dataType: "text", //数据格式:JSONurl: '<%=path%>/servlet/RandomCodeServlet', //目标地址 error: function (XMLHttpRequest, textStatus, errorThrown) { },success: function (msg){ }});}function input(mobile) {var btn=1;document.getElementById("code_btn").disabled=true;if (mobile.length == 0) {alert('请输入手机号码！');btn = 0;document.form1.mobile.focus(); return false; } if (mobile.length != 11) {alert('请输入长度11位手机号码！');btn = 0;document.form1.mobile.focus();return false;} var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;if (!myreg.test(mobile)) {alert('请输入有效的手机号码！');btn = 0;document.form1.mobile.focus();return false;} if(btn==1){document.getElementById("code_btn").disabled=false;}}
</script></head>
<body><h1>App Location Form</h1><div class="app-location"><h2>欢迎使用饿了吧</h2> <form><input type="text" class="text" name="phone" id="phone_num"  onblur="input(this.value)"  value="请输入手机号码" onFocus="this.value = '';"  ><input type="text" value="请输入验证码" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '请输入验证码';}"><input type="button" id="code_btn" disabled="true"  onclick="code(),settime(this);" value="获取验证码" ><div class="submit"> <input type="submit" value="登录" > </div><div class="clear"></div> </form></div></body>
</html>

JS关于登录页面使用手机验证码登录相关推荐

如何使用阿里云短信服务实现登录页面，手机验证码登录？
1:个人如何使用阿里云短信服务? 2022如何使用个人阿里云短信服务?_linxiMY的博客-CSDN博客添加完成之后,等待审核!一般2个小时就会出来审核结果了,这里我因为注册申请时填写规则有误,足足 ...
验证码登录开发----手机验证码登录
手机验证码登录需求分析为了方便用户登录,移动端通常都会提供通过手机验证码登录的功能手机验证码登录的优点: 方便快捷.无需注册,直接登录使用短信验证码作为登录凭证,无需记忆密码安全登录流程: ...
【瑞吉外卖项目】DAY5——第六章手机验证码登录
本章内容介绍手机验证码登录点击获取验证码收到短信,并输入验证码点击登录,登录成功短信发送_短信服务介绍和阿里云短信服务介绍短信服务介绍目前市面上有很多第三方提供的短信服务,这些第三方短信服 ...
【从零开始分析项目实战】12-阿里云手机验证码登录功能的实现
注:本文章基于黑马程序员相关视频及资料进行编写,代码简单,较容易理解,若有问题或者源码资料获取可以在评论区留言或者联系作者! 文章目录开篇一.短信发送 (1)短信服务介绍 (2)阿里云短信服务 ( ...
Spring Cloud OAuth2 扩展登录方式：帐户密码登录、手机验证码登录、二维码扫码登录
本文扩展了spring security 的登录方式,增长手机验证码登录.二维码登录. 主要实现方式为使用自定义filter. AuthenticationProvider. AbstractAuth ...
阿里云短信平台实现手机验证码登录
阿里云短信平台实现手机验证码登录首先创建一个工具类工具类AliyunMessageUtil代码如下所示: public class AliyunMessageUtil {private stati ...
Java实现手机验证码登录和SpringSecurity权限控制
手机验证码登录和SpringSecurity权限控制手机快速登录功能,就是通过短信验证码的方式进行登录.这种方式相对于用户名密码登录方式,用户不需要记忆自己的密码,只需要通过输入手机号并获取验证码就 ...
瑞吉外卖（6）—手机验证码登录
目录一.手机验证码登录 1.1 短信发送 1.2 短信验证码登陆 1.2.1 需求分析 1.2.2 数据模型 1.2.3 代码开发发送验证码(给的资料有点残缺,这里修改了) 使用验证码登陆(使用m ...
学习【瑞吉外卖⑥】SpringBoot单体项目_手机验证码登录业务开发
视频:[黑马程序员]Java 项目实战<瑞吉外卖>,轻松掌握 SpringBoot + MybatisPlus 开发核心技术资料:2022 最新版 Java学习路线图>第 5 阶 ...

JS关于登录页面使用手机验证码登录

JS关于登录页面使用手机验证码登录相关推荐

最新文章

热门文章