html web前端 登录，短信验证码登录
1，手机号码格式校验
2，按钮点击60秒倒计时，按钮限制点击
3，验证码/或密码长度校验（被注释，公司发的验证码长度不一致，不一定是6位）
4，get网络请求
5，post网络请求 json带参上传
6，服务器返回值打印
6d4f50def6875c3f0b5b898f83cc4664.jpg
<html><head><meta charset="UTF-8"><title>登录</title></head><body><div><div style="margin: 10px;"><input style="width: 200px; " id="phone" type="text" autocomplete="off" placeholder="请输入手机号" /><input style="width: 100px; " id="btnSendCode" type="button" value="获取验证码" onClick="sendMessage()" /></div><div style="margin: 10px;"><input style="width: 300px;" id="code" type="text" autocomplete="off" placeholder="请输入验证码" /></div><div style="margin: 15px;"><button style="width: 100px;" onClick="login()"> 登 录 </button><span style="width: 200px;" id="logintext" class="ssss">log打印：</span></div></div></body><script type="text/javascript">var phoneDom = document.querySelector('#phone');var codeDom = document.querySelector('#code');var btnSendCode = document.querySelector("#btnSendCode");var count = 60; //间隔函数，1秒执行var InterVal; //timer变量，控制时间//var count;//当前剩余秒数function SetTime() {if (curCount == 0) {window.clearInterval(InterVal); //停止计时器btnSendCode.removeAttribute("disabled"); //启用按钮btnSendCode.value = "重新发送";} else {curCount--;btnSendCode.value = curCount + "秒再获取";}}/*** 获取验证码*/function sendMessage() {/var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/; //手机号正则var phone = (phoneDom.value).trim();if (!phoneReg.test(phone)) {alert(" 请输入有效的手机号码");return false;} /curCount = count;//设置button效果，开始计时btnSendCode.setAttribute("disabled", "true");btnSendCode.value = curCount + "秒再获取";InterVal = window.setInterval(SetTime, 1000); //启动计时器，1秒执行一次///向后台发送处理数据// 创建对象const xhr = new XMLHttpRequest();xhr.responseType = "json"//初始化xhr.open('GET', 'https://api.wzyanche.com/sms/SendSms/' + phoneDom.value);//发送xhr.send();//处理返回值xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status == '200') {//手动对数据转化let data = xhr.response;console.log('111 111 返回的数据', data);}}}}/*** 登录* 提交信息*/function login() {// var code = codeDom.value;// if (!code || code.trim().length != 6) {// alert(" 请输入6位短信验证码");// return false;// }// 创建一个 XMLHttpRequest 对象var xhr = new XMLHttpRequest();// 配置请求xhr.open('POST', 'https://api.wzyanche.com/cusInfo/login', true);xhr.setRequestHeader('Content-Type', 'application/json');// 发送 JSON 数据var data = {phone: phoneDom.value,verificationCode: codeDom.value,};xhr.send(JSON.stringify(data));// 监听请求的状态xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// 请求成功后的处理console.log(xhr.responseText);// 打印，获取json里的对象var data2 = JSON.parse(xhr.responseText)console.log('222 222 返回的数据', data2.retMsg);// 打印返回值document.getElementById("logintext").textContent = data2.retMsg;}};}</script></html>
