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>