js原生ajax表单验证

作者: writeanewworld | 来源:发表于2018-01-15 20:15 被阅读0次

js原生ajax表单验证
form表单验证
2018-08-11
【it修真院小课堂第132期】angular js常用指令 ng
Laravel 之验证 validate 验证问题
[转]JS原生Ajax代码示例
Yii2 笔记
原生js实现Ajax
Ajax Axios
项目简介

主要说一下ajax表单验证的步骤

(1):创建ajax对象

var oAjax = null;
 if(window.XMLHttpRequest){
     oAjax = new XMLHttpRequest();
 }else{
     oAjax = new ActiveXObject('Microsoft.XMLHTTP');
 }

(2):连接服务器

 oAjax.open('POST','http://127.0.0.1:8080/SuPaySSM/user/userlogin.do',true);
 oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 console.log(data);
// oAjax.send(data);//"userMemberName="+userMemberName.value+"&uPassword="+uPassword.value
 oAjax.send("userMemberName="+userMemberName.value+"&uPassword="+uPassword.value);

可以使用表单序列化进行send

(3):发送请求
(4):对响应进行解析

 oAjax.onreadystatechange=function(){
     if(oAjax.readyState==4){
         if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
             //4.对响应进行解析
             var users=JSON.parse(oAjax.responseText);
             console.log(users);
         }else{
             //4.对响应进行解析
             console.log(oAjax.status);
         }
     }
 };

2.再就是可以在其外边穿插一些验证规则进行表单的基本验证。

例子：

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<style>
    body,html{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    .container{
        width: 100%;
        height: 100%;
        background: #e4e4e4;
        padding-top: 10%;
    }

    .div-form{
        width: 400px;
        height: 300px;
        background: white;
        margin: 0px auto;
        padding: 10px 20px;
    }
    .div-form table{
        width: 100%;
    }
    .div-form input{
        width: 100%;
        height: 50px;
        border: solid 1px gray;
        outline: none;
        box-sizing: border-box;
    }
    .div-form [type='button']{

        background: red;
       color: white;
    }

    .div-form .error-message{
        font-size: 0.7em;
        color: red;
        width: 100%;
        padding: 10px 0px;
        display: none;
    }
</style>
</head>
<body>
<div class="container">
    <div class="div-form">

        <form id="myform" name="loginForm">
            <table>
                <tr><td>账号登录</td></tr>
                <tr><td><input type="text" id="txt_id" name="txtId" value="13812790420"></td></tr>
                <tr><td>
                    <div class="error-message" id="error_id">
                        * 有户名不合法
                    </div>
                </td></tr>
                <tr><td><input type="text" id="txt_pass" name="txtPass" value="123456789"></td></tr>


                <tr><td>
                    <div class="error-message" id="error_message">

                    </div>
                </td></tr>
                <tr><td><input type="button" value="登录" id="btn_login"></td></tr>
                <tr><td><input type="submit" value="提交" id="btn_提交"></td></tr>
                <tr><td>
                    <div></div>
                    <div></div>
                </td></tr>

                <input type="file" name="myicon">
            </table>

        </form>
    </div>
</div>

<script type="text/javascript">
    var txt_id=document.querySelector('#txt_id');
    var txt_pass=document.querySelector('#txt_pass');
    var btn_login=document.querySelector('#btn_login');
    var error_message=document.querySelector('#error_message');
    
    function checkId(id) {
        if(id && id.length>=6){
            for(var i=0,len=id.length;i<len;i++){
                var c=id.charAt(i);

                if(!(c>='0'&&c<='9')){
                    return false;
                }
            }
            
            return true;
        }else{
            return false
        }
    }

    function checkPass(pass) {
        if(pass && pass.length>=6){
            return true;
        }else{
            return false
        }
    }
    
    btn_login.onclick=function () {
        checkAll();
    }

    function checkAll() {
        if(checkId(txt_id.value)){
 //   error_message.style.display='none';
            if(checkPass(txt_pass.value)){
                error_message.style.display='none';

// 用户名密码都合法

                var oAjax = null;
                if(window.XMLHttpRequest){
                    oAjax = new XMLHttpRequest();
                }else{
                    oAjax = new ActiveXObject('Microsoft.XMLHTTP');
                }

                var _url=addURLParam('users.json','txtId',txt_id.value);
                _url=addURLParam(_url,'txtPass',txt_pass.value);

//   var url='users.json?txtId='+encodeURIComponent(txt_id.value)+'&txtPass='+encodeURIComponent(txt_pass.value);
                console.log(_url);

       //get
  // oAjax.open('get','users.json',true);


                oAjax.open('post','users.json',true);
                var formdata=new FormData(document.querySelector('#myform'));
    // oAjax.send('txtId='+txt_id.value+'&txtPass='+txt_pass.value);
                console.log(formdata.get('txtId'));
                oAjax.send(formdata);
                oAjax.onreadystatechange=function(){
                    if(oAjax.readyState==4){
                        if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
                            var users=JSON.parse(oAjax.responseText);
                            if(users[0].id.trim()==txt_id.value && users[0].password==txt_pass.value){
                                location.href='success.html';
                            }else{
                                error_message.style.display='block';
                                error_message.innerText='* 用户名或者密码错误';
                            }
                        }else{
                            console.log(oAjax.status);
                        }
                    }
                };

            }else{
                error_message.style.display='block';
                error_message.innerText='* 密码不合法';
            }
        }else{
            error_message.style.display='block';
            error_message.innerText='* 用户名不合法';
            return false
        }
    }

    function addURLParam(url,name,value) {
        url+=(url.indexOf("?")==-1)?"?":"&";
        url+=encodeURIComponent(name)+"="+encodeURIComponent(value);
        return url;
    }


</script>
</body>
</html>