用XMLHttpRequest获取参数值并验证返回结果-CFANZ编程社区

用XMLHttpRequest获取参数值并验证返回结果

双井暮色 2022-04-06 阅读 34

标签: ajax

用XMLHttpRequest获取用户输入的值并验证用户名和密码是否符合服务器上的数据并返回结果

<body>
    <form action="">
        用户名:<input type="text" value="" placeholder="用户名"  id="uname" >
        <span id="msg1"></span><br>

        密码: <input type="password" id="upwd" value='' placeholder="请输入密码">
        <span id="upwdmsg"></span><br>

        <input type="button" value="提交" id="btn">
       </form>
        <script>
             btn.onclick=function(){ 
             var reg= /^[a-zA-Z0-9]{3,11}$/;       
                 if(!reg.test(uname.value)){
                     msg1.innerHTML='用户格式错误';
                     return;
                 }
                 if(!reg.test(uname.value)){
                    upwdmsg.innerHTML='密码格式错误';
                     return;
                 }  
                 //养成习惯 对用户输入的东西自己要确定拿到手，自己要验证一遍 比如下面的alert能出现那就是前面的代码是正确的             
                // alert(uname.value+upwd.value); 
                 //1.创建对象
                 var xhr=new XMLHttpRequest();
                 //2.指定请求方式,指定服务器地址,指定是否异步
                 xhr.open('POST','http://127.0.0.1:3000/login',true);
                 //3.指定post请求的数据类型
                 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                 var data=`name=${uname.value}&pwd=${upwd.value}`
                 alert(data);//试一下是否拿到参数
                 //4.发送
                 xhr.send(data);
                 //5.接收服务器返回的数据
                 setTimeout(function(){
                     console.log(xhr.responseText);
                 },1000);
             }
        </script>   
</body>