JavaScript的表单校验、ajax提交和数据渲染的流程

下面简单封装了一个类似jquery的ajax工具

(function(global){
    let kevin = {};
    kevin.ajax = function(type, url, data, headers, callback){
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if(Math.floor(xhr.status / 100) == 2  && xhr.readyState == 4){
                callback(xhr.responseText);
            }
        };
        xhr.open(type, url, true);
        headers.forEach((header) => {
            xhr.setRequestHeader(header.key, header.value);
        });
        xhr.send(JSON.stringify(data));
    };
    global.$ = kevin;
})(window);

然后我们通过我们封装好的ajax工具进行表单的提交。

首先进行表单的校验，如果校验失败，渲染失败信息。如果校验成功，利用ajax将数据提交到json-server(json-server主要的作用是搭建一台JSON服务器,测试一些业务逻辑),然后将添加的数据渲染到界面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="util.js"></script>
</head>
<body>

<form id="registerFrom">
    name: <input type="text" name="name"><span class="tip"></span><br>
    age: <input type="text" name="age"><span class="tip"></span><br>
    email: <input type="text" name="email"><span class="tip"></span><br>
    <input type="submit" value="submit">
</form>

<div id="user">


</div>


<script>
    window.onload = function () {
        (function () {
            let nameR = /^\w{3,6}$/;
            let ageR = /^[1-9]\d?$/;
            let emailR = /^\w+@\w+(\.\w+)+$/;
            let errors = new Map();
            let url = "http://localhost:3000/users";
            let type = "POST";
            let headers = [{key :"Content-Type", value:'application/json'}];
            function validate(user) {
                errors.clear();
                if(!nameR.test(user.name)){
                    errors.set("name","name is error");
                }
                if(!ageR.test(user.age)){
                    errors.set("age","age is error");
                }
                if(!emailR.test(user.email)){
                    errors.set("email","email is error");
                }

            }
            
            function renderErrors(form) {
                let nameSpane = form[0].nextElementSibling;
                let ageSpane = form[1].nextElementSibling;
                let emailSpane = form[2].nextElementSibling;
                let nameError = errors.get('name') ? errors.get('name') : "";
                let ageError = errors.get('age') ? errors.get('age') : "";
                let emailError = errors.get('email') ? errors.get('email') : "";
                nameSpane.textContent = nameError;
                ageSpane.textContent = ageError;
                emailSpane.textContent = emailError;
            }

            function renderUser(user) {
                let userDiv = document.querySelector("#user");
                userDiv.textContent = user.id + "," + user.name + "," + user.age + "," + user.email;
            }

            function send(user) {
                $.ajax(type,url,user,headers,function(txt){
                    renderUser(JSON.parse(txt));//渲染
                });
            }

            document.querySelector("#registerFrom").addEventListener('submit',(e) =>{
                let name = document.querySelector("input[name=name]").value;
                let age = document.querySelector("input[name=age]").value;
                let email = document.querySelector("input[name=email]").value;
                let user = {name:name, age:age, email:email};
                validate(user);
                if(!errors.size){
                    send(user);
                    e.preventDefault();//阻止表单提交
                }else{
                    renderErrors(document.querySelector("#registerFrom"));
                    e.preventDefault();//阻止表单提交
                }
            });

        })();

        
    }

</script>

</body>
</html>

JavaScript的表单校验、ajax提交和数据渲染的流程

猜你喜欢