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

今天药忘吃喽~ 2022-05-19 03:47 151阅读 0赞

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

然后我们通过我们封装好的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>