js手机号验证码注册

js详细部分

说明：
1.开始输入手机号，判断手机号是否符合格式，符合格式则获取验证码及注册的按钮样式发生改变。
2.此时点击获取验证码，向后台请求验证码，请求成功则开始验证码倒计时，否侧返回提示信息。
3.最后输入手机验证码，点击注册按钮，判断手机号验证码是否填写，如果填写请求后台url提交信息否则返回提示信息。

/* 微信注册页面 */
window.onload = function(){$.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});/*验证码倒计时*/var count = 600;function SetTime() {if(count == 0){$('#getcode').attr("disabled");$('#getcode').html("获取验证码");$('#getcode').removeClass('code_bt');$('#getcode').addClass('change_code_bt');count = 600;return;}else{$('#getcode').removeClass('change_code_bt');$('#getcode').addClass('code_bt');$('#getcode').attr("disabled",true);$('#getcode').html("重新发送("+count+"s)");count--;}setTimeout(function () {SetTime();},1000)}/*获取验证码部分*/function GetVerifyCode(phone) {var VerifyCode;$.ajax({type: 'post',url: 'getcode',  //请求的urlasync:false, //同步  必加data:{ phone:phone },success:function (data) {if(data.result == true){VerifyCode = data.data;}else{alert(data.errorMessage);VerifyCode = 'error' ;}}});return VerifyCode; //返回值}/*1. 检测手机号码是否是正常的号码*/var vc;$('#phone').blur(function () {var phone = $('#phone').val();var verify = $('#verify').val();if(phone == '') {alert('手机号不能为空');return false;}else if(!(/^1[0-9][0-9]\d{4,8}$/.test(phone))){alert('手机号不正确');return false;}else if(phone.length!=11){alert('手机号不正确');return false;}else{//手机号格式正确//验证码改变样式$('#getcode').removeClass('code_bt');$('#getcode').addClass('change_code_bt');//注册改变样式$('#register').removeClass('sub_bt');$('#register').addClass('change_sub_bt');/*点击获取验证码触发 倒计时函数、验证码获取函数*/$('#getcode').click(function () {var phone = $('#phone').val();//执行服务端获取验证码函数vc = GetVerifyCode(phone);// console.log(vc);// 判读验证码是否获取成功 开始计时if(vc != 'error'){SetTime();}});}});/*2.点击注册按钮*/$('#register').click(function () {var phone = $('#phone').val();var verify = $('#verify').val();var pass = $('#pass').val();if(verify == ''){alert('请填写验证码');return false;}else if(pass == "" ||pass.length<6){alert('验证码不能为空并且不能小于6位');return false;}else{// console.log('1:'+verify);// console.log('2:'+vc);if(verify == vc){//验证码正确 保存数据submit_info(phone,pass);}else{alert('验证码输入不正确！');}}});/*提交信息*/function submit_info(phone,pass) {$.ajax({type: 'post',url:  "register",data: {phone:phone,pass:pass},success: function (data) {if(data.code == 0){alert(data.msg);location.href = 'toupload'; //跳转页面的url}else{alert(data.msg);}},error:function (data) {alert('请重新尝试');}});}
};

js手机号验证码注册相关推荐

抖音实战~手机号验证码一键注册登录流程（限制手机终端登录）
文章目录一.手机号+验证码二.前端 2.1. 点击登陆流程 2.2. 点击登录源码三.后端登录 3.1. 登录流程图 3.2. 流程简述 3.3. 手机号验证码登录流程一.手机号+验证码二. ...
Spring securty＜六＞认证--手机号+验证码
Spring securty<六> 认证–手机号+验证码文章目录 Spring securty<六> 认证--手机号+验证码 1.简介 2.认证(登录) 3.认证的流程 3. ...
手机号验证码登录的思路
引言当前很多web端的应用登录方式主要分为以下几种: 账号密码登录手机号验证码登录扫码登录这里我主要说一下我对于手机号验证码登录的思路,如果有遗漏或者差错的地方,请指正: 整体流程大致流程如 ...
mysql查询使用qq邮箱注册_Spring Boot实现qq邮箱验证码注册和登录验证功能
1.登录注册思路这是一个使用spring boot做的一个qq邮箱注册和登录的项目. 没写前端页面,使用postman测试.有截图详细. 1.1.思路注册:通过输入的邮箱发送验证码,检验前端传来的 ...
springboot整合redis之用户手机验证码注册登录
目录 1搭建项目开发环境 1.1安装redis 1.1.1下载redis 1.1.2安装redis 1.1.3设置redis为windows服务安装为windows服务 1.2启动idea 1.3增 ...
小程序手机号验证码登录
这是我最近的一个项目--微信小程序实现手机号- -验证码登录,涉及到了提交参数时需要加密.加密所采用的方式也是按照要求,严格采用16位小加密的MD5的加密形式. login.wxml <vie ...
阿里云账户使用手机号+验证码登录开启方法、
阿里云账号登录支持手机号验证码登录方式,但是如果是2022.4.1前注册的账号,需要先在账号中心开启手机号登录,才可以使用手机号登录.阿里云百科来详细说下阿里云账号开启手机号登录的方法: 阿里云账号手 ...
keycloak单点登录（浙政钉2.0扫码、手机号验证码登录）
写在前面:本篇博客只针对前端代码实现,keycloak配置什么的,自己和后端或者运维联调吧.说实在的,因为不熟悉keycloak代码的逻辑,再加上时间紧,所以搞了一些很多骚操作. 登录这些前端代码是写 ...
Android 基于bmob平台的手机登录验证码注册等功能实现
首先是基于Bmob 平台,采用MVP 开发模式.效果见图: 下面一一给出源码: MVP 目录结构: 登录/注册的Activity: package com.example.yangzi.mvp_de ...

js手机号验证码注册

js详细部分

js手机号验证码注册相关推荐

最新文章

热门文章