html web前端登录，短信验证码登录-蒲公英云

html web前端登录，短信验证码登录

1，手机号码格式校验
2，按钮点击60秒倒计时，按钮限制点击
3，验证码/或密码长度校验（被注释，公司发的验证码长度不一致，不一定是6位）
4，get网络请求
5，post网络请求 json带参上传
6，服务器返回值打印

format_png

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>