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

╰半橙微兮° 2024-02-21 11:08 99阅读 0赞

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>

[format_png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/8ca11dc10c3648caa2ac170d450e426f.png