苏州建站公司 诚找苏州聚尚网络,南京市建设工程造价信息网,织梦网站密码,做网站必须要认证吗html web前端 登录#xff0c;短信验证码登录
1#xff0c;手机号码格式校验 2#xff0c;按钮点击60秒倒计时#xff0c;按钮限制点击 3#xff0c;验证码/或密码长度校验#xff08;被注释#xff0c;公司发的验证码长度不一致#xff0c;不一定是6位#xff09; 4…html web前端 登录短信验证码登录
1手机号码格式校验 2按钮点击60秒倒计时按钮限制点击 3验证码/或密码长度校验被注释公司发的验证码长度不一致不一定是6位 4get网络请求 5post网络请求 json带参上传 6服务器返回值打印 6d4f50def6875c3f0b5b898f83cc4664.jpg htmlheadmeta charsetUTF-8title登录/title/headbodydivdiv stylemargin: 10px;input stylewidth: 200px; idphone typetext autocompleteoff placeholder请输入手机号 /input stylewidth: 100px; idbtnSendCode typebutton value获取验证码 onClicksendMessage() //divdiv stylemargin: 10px;input stylewidth: 300px; idcode typetext autocompleteoff placeholder请输入验证码 //divdiv stylemargin: 15px;button stylewidth: 100px; onClicklogin() 登 录 /buttonspan stylewidth: 200px; idlogintext classsssslog打印/span/div/div/bodyscript typetext/javascriptvar 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
