版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37523448/article/details/79209648
————————————————
版权声明：本文为CSDN博主「Aftery的博客」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_37523448/article/details/79209648

首先，给大家介绍下注册界面以及获取手机验证码的一些原理和规则逻辑，方便大家在今后更好的使用此功能，分别注意以下几点：（代码写的怎么样看看就知道，不含糊）；

1，界面div这个必不可少的；（输入账户、输入密码、验证码获取、点击注册按钮）

账号
验证码
登录密码

注册

2，js部分，写个应该算详细了吧，如下：

第一部分倒计时；

var countdown=60;
function settime(obj) {
if (countdown == 0) {
obj.removeAttribute(“disabled”);
obj.value=“获取验证码”;
countdown = 60;
return;
} else {
obj.setAttribute(“disabled”, true);
obj.value=“重新发送(” + countdown + “)”;
countdown–;
}
setTimeout(function() {
settime(obj)
}
,1000)
}

第二部分；检测手机号码是否是正常的号码。

var byzm;
document.getElementById(‘btninfo’).addEventListener(‘tap’,function(){
var zhuceBox = document.getElementById(‘zhvalue’).value;
if(zhuceBox==’’){
mui.toast(‘手机号不能为空’);
return false;
}else if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(zhuceBox))){
mui.toast(“手机号不正确”);
return false;
}else if(zhuceBox.length!=11){
mui.toast(“手机号不正确”);
return false;
}else{
settime(this);
byzm=GetCode(zhuceBox);
}
});

第三部；点击注册按钮事件；

document.getElementById(‘zhuce’).addEventListener(‘tap’,function(){
var zhuceBox = document.getElementById(‘zhvalue’).value;
var yzinfoBox = document.getElementById(‘yzinfo’).value;
var dlinfoBox = document.getElementById(‘dlinfo’).value;
if(zhuceBox==’’){
mui.toast(‘手机号不能为空’);
return false;
}
else if(zhuceBox.length!=11){
mui.toast(‘手机号不正确’);
return false;
}else if(yzinfoBox==’’){
mui.toast(‘请填写验证码’);
return false;
}else if(dlinfoBox==’’||dlinfoBox.length<6){
mui.toast(‘密码不能为空并且不能少于6个字符’)
}else{
if(yzinfoBox==byzm){
console.log(“注册成功”);
adduse(zhuceBox,dlinfoBox);
mui.toast(‘注册成功！！’)
setTimeout(function() {
mui.back();
}
,1000)
}else{
mui.toast(‘验证码输入不对’)
}
};
});

第四部分；此处为注册接口调用；

function adduse(zh,mm){
mui.ajax({
type:‘post’,
contentType: “application/json”,
url:http…//此处填写自己的服务器url地址；
dataType: “json”,
data: {//data携带的参数，根据自己的服务器参数写就ok；
sortname:zh,
username:zh,
pwd:mm,
model:1
},
success: function(data) {
console.log(JSON.stringify(data.d));
}
});
}

第五部分：此处为点击获取验证码，服务器返回数据给客户端，接收验证码的接口：

function GetCode(tels){
var yzm;
mui.ajax({
type:‘post’,
contentType: “application/json”,
url:http…//此处填服务器url，
dataType: “json”,
async: false,
data: {
username:tels,
msg:’’,
},
success: function(data) {//成功的data函数
var json = eval(’(’+ data.d + “)”);
yzm=json.code;
console.log(“返回的验证：”+yzm);
}
});
return yzm;
}

好了。今天就为大家写到这里，还会继续写更好的文章，让更多的初学者得到帮助和解决困扰，如果有什么问题可以留言或者联系博主，看到信息会立马给你们解答，祝大家每天学习多一点，希望帮助到更多的朋友和志同道合的伙伴们。
————————————————
版权声明：本文为CSDN博主「Aftery的博客」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_37523448/article/details/79209648

最完整手机号获取验证码登陆注册逻辑相关推荐

  1. 输入手机号获取验证码的注册页面，说出测试过程

    考察的点有两个,一个是对手机号格式和验证码格式的验证,一个是对验证码获取功能的验证. 基本原理:验证码1分钟内只能发一次,有效期10分钟.验证码是后台Java代码生成的,然后验证码生成时间和此验证码会 ...

  2. vue+vant 实现手机号 获取验证码页面

    vue+vant 实现手机号 获取验证码页面 html <van-field label="手机号"v-model="phone"centerrequir ...

  3. 短信验证（手机号注册，绑定手机号获取验证码）

    今天写一个常见的功能--手机app中注册或绑定手机号的获取验证码的功能.也就是短信验证功能 具体效果就是,你在注册界面填写手机号,点击获取验证码按钮,---然后会收到验证短信,填入验证码后点击注册按钮 ...

  4. Android短信验证（手机号注册，绑定手机号获取验证码）实例

    今天写一个常见的功能--手机app中注册或绑定手机号的获取验证码的功能.也就是短信验证功能 具体效果就是,你在注册界面填写手机号,点击获取验证码按钮,---然后会收到验证短信,填入验证码后点击注册 ...

  5. 手机号获取验证码：django版本2.2/ js

    (venv)虚拟环境安装django版本2.2.12 pip install django==2.2.12 -i https://pypi.tuna.tsinghua.edu.cn/simple/ ( ...

  6. 手机号获取验证码、验证验证码是否正确

    html: <div class="left_box lf"> <div class="menu"> <span style=&q ...

  7. 最详细的Keycloak教程：Keycloak实现手机号、验证码登陆——（一）Keycloak的下载与使用

    目录 一. 简介 二.Keycloak下载与启动 三.配置国际化内容 一. 简介 接触keycloak已经半个多月了,主要是为了用来集成现已有的项目,也是弄得头大,代码不负脱发人,也是有点小成果了,在 ...

  8. html+js手机号获取验证码功能实现

    1.找可靠的平台获得接口,我选择的是网易易盾(以下基于该平台实现),有100次的验证码发送机会. 2.找到平台,https://dun.163.com/ 3.根据官方的示例代码,调试运行通过之后,更改 ...

  9. Android简易登陆注册逻辑

    activity_login <?xml version="1.0" encoding="utf-8"?> <androidx.constra ...

最新文章

  1. NLog在Asp.Net MVC的实战应用
  2. 树上启发式合并问题 ---- 2019icpc南昌 K. Tree （树上启发式合并 + 动态开点线段树)
  3. springBoot 全局异常方式处理自定义异常 @RestControllerAdvice + @ExceptionHandler
  4. KubeEdge vs K3S：Kubernetes在边缘计算场景的探索
  5. Javascript的怪癖
  6. 《快活帮》第三次作业：团队项目的原型设计
  7. 网络请求（HTTP协议）小结
  8. python列表去重_python 字典列表/列表套字典 去重重复的字典数据
  9. 并发之AtomicIntegerFieldUpdater
  10. SQL Server 计算年龄函数
  11. 三种简单的浏览器设置自动刷新网页
  12. 笔记本什么都没开，风扇为什么一直转？——CDPUserSvc服务
  13. Python爬虫以及数据可视化分析！
  14. C++：实现量化SMM Caplet均匀校准测试实例
  15. 互联网晚报 | 07月02日 星期六 | ​​​北京健康宝核酸检测天数计算规则调整；​上海鼓励用人单位吸纳失业3个月及以上人员...
  16. 解决xp共享的批处理文件
  17. 医疗行业大数据医疗分析案例
  18. 最好用的五款知识库制作网站大盘点
  19. 如何在Linux系统上监测系统温度？（亲测可用）
  20. vis.js的研究之路

热门文章

  1. 极速office（Word）怎么在空白处添加下划线
  2. matlab画图:取样后零阶保持和条形图
  3. 数据结构学习——树形结构之递归遍历二叉树
  4. csgo下方各种数据都是意思_Pasha虎牙首秀，茄子和CSGO众大咖前来助阵，药水哥来砸场子...
  5. java swing 记事本_Java Swing 记事本代码
  6. stm32开发3D打印机（六）——使用FATFS文件系统读取打印文件　获取信息　执行转换 转换坐标（上）
  7. Flutter 开发现状
  8. 小米8屏幕碎了导出数据_手滑？摔碎屏幕也不怕，小米推出MiCare保障计划
  9. java中的循环语句_Java中三种常用的循环语句，一看就懂~
  10. 大学生html个人博客,个人博客分享