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

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

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

    6d4f50def6875c3f0b5b898f83cc4664.jpg

    1. <html>
    2.     <head>
    3.         <meta charset="UTF-8">
    4.         <title>登录</title>
    5.     </head>
    6.  
    7.     <body>
    8.         <div>
    9.  
    10.             <div style="margin: 10px;">
    11.                 <input style="width: 200px; " id="phone" type="text" autocomplete="off" placeholder="请输入手机号" />
    12.                 <input style="width: 100px; " id="btnSendCode" type="button" value="获取验证码" onClick="sendMessage()" />
    13.             </div>
    14.  
    15.             <div style="margin: 10px;">
    16.                 <input style="width: 300px;" id="code" type="text" autocomplete="off" placeholder="请输入验证码" />
    17.             </div>
    18.  
    19.             <div style="margin: 15px;">
    20.                 <button style="width: 100px;" onClick="login()"> 登 录 </button>
    21.                 <span style="width: 200px;" id="logintext" class="ssss">log打印：</span>
    22.             </div>
    23.  
    24.         </div>
    25.     </body>
    26.  
    27.  
    28.     <script type="text/javascript">
    29.         var phoneDom = document.querySelector('#phone');
    30.         var codeDom = document.querySelector('#code');
    31.         var btnSendCode = document.querySelector("#btnSendCode");
    32.  
    33.         var count = 60; //间隔函数，1秒执行
    34.         var InterVal; //timer变量，控制时间
    35.         //var count;//当前剩余秒数
    36.         function SetTime() {
    37.             if (curCount == 0) {
    38.                 window.clearInterval(InterVal); //停止计时器
    39.                 btnSendCode.removeAttribute("disabled"); //启用按钮
    40.                 btnSendCode.value = "重新发送";
    41.             } else {
    42.                 curCount--;
    43.                 btnSendCode.value = curCount + "秒再获取";
    44.             }
    45.         }
    46.         /**
    47.          * 获取验证码
    48.          */
    49.         function sendMessage() {
    50.             /
    51.             var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/; //手机号正则
    52.             var phone = (phoneDom.value).trim();
    53.             if (!phoneReg.test(phone)) {
    54.                 alert(" 请输入有效的手机号码");
    55.                 return false;
    56.             } /
    57.             curCount = count;
    58.             //设置button效果，开始计时
    59.             btnSendCode.setAttribute("disabled", "true");
    60.             btnSendCode.value = curCount + "秒再获取";
    61.             InterVal = window.setInterval(SetTime, 1000); //启动计时器，1秒执行一次
    62.  
    63.  
    64.             /
    65.             //向后台发送处理数据
    66.             // 创建对象
    67.             const xhr = new XMLHttpRequest();
    68.             xhr.responseType = "json"
    69.             //初始化
    70.             xhr.open('GET', 'https://api.wzyanche.com/sms/SendSms/' + phoneDom.value);
    71.             //发送
    72.             xhr.send();
    73.             //处理返回值
    74.             xhr.onreadystatechange = function() {
    75.                 if (xhr.readyState === 4) {
    76.                     if (xhr.status == '200') {
    77.                         //手动对数据转化
    78.                         let data = xhr.response;
    79.                         console.log('111 111 返回的数据', data);
    80.                     }
    81.                 }
    82.             }
    83.         }
    84.         /**
    85.          * 登录
    86.          * 提交信息
    87.          */
    88.         function login() {
    89.             // var code = codeDom.value;
    90.             // if (!code || code.trim().length != 6) {
    91.             // alert(" 请输入6位短信验证码");
    92.             // return false;
    93.             // }
    94.  
    95.             // 创建一个 XMLHttpRequest 对象
    96.             var xhr = new XMLHttpRequest();
    97.  
    98.             // 配置请求
    99.             xhr.open('POST', 'https://api.wzyanche.com/cusInfo/login', true);
    100.             xhr.setRequestHeader('Content-Type', 'application/json');
    101.  
    102.             // 发送 JSON 数据
    103.             var data = {
    104.                 phone: phoneDom.value,
    105.                 verificationCode: codeDom.value,
    106.             };
    107.             xhr.send(JSON.stringify(data));
    108.  
    109.             // 监听请求的状态
    110.             xhr.onreadystatechange = function() {
    111.                 if (xhr.readyState === 4 && xhr.status === 200) {
    112.                     // 请求成功后的处理
    113.                     console.log(xhr.responseText);
    114.                     // 打印，获取json里的对象
    115.                     var data2 = JSON.parse(xhr.responseText)
    116.                     console.log('222 222 返回的数据', data2.retMsg);
    117.                     // 打印返回值
    118.                     document.getElementById("logintext").textContent = data2.retMsg;
    119.                 }
    120.             };
    121.         }
    122.     </script>
    123.  
    124. </html>
  • 相关阅读:
    约定式提交 commit 规范
    数据安全技术专利态势分析
    使用crul库和R语言的下载器程序
    Bindiff安装以及使用
    精心总结十三条建议，帮你创建更合适的MySQL索引
    【RS422】基于未来科技FT4232HL芯片的多波特率串口通信收发实现
    this的基本概念,call/bind/apply的使用，手写call/bind/apply方法
    LeetCode_哈希表_中等_454.四数相加 II
    电机控制::理论分析::延迟环节对系统的影响
    每天一个注解之@WebService
  • 原文地址：https://blog.csdn.net/jun_tong/article/details/133989142