JavaScript的表單校驗、ajax提交和資料渲染的流程

阿新 • • 發佈：2019-01-27

下面簡單封裝了一個類似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 = /^\ 
[email protected]\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提交和資料渲染的流程

下面簡單封裝了一個類似jquery的ajax工具 (function(global){ let kevin = {}; kevin.ajax = function(type, url, data, headers, callback){ l

JavaScript表單校驗

確認事件事件觸發函式函式操作元素 &nbs

easyui 進階之tree easyui 進階之表單校驗、自定義校驗

前言 easyui是一種基於jQuery的使用者介面外掛集合，它為建立現代化，互動，JavaScript應用程式，提供必要的功能，完美支援HTML5網頁的完整框架，節省網頁開發的時間和規模。非常的簡單易學。 easyui中文網：http://www.jeasyui.net/ easyui官網：http:

easyui 進階之表單校驗、自定義校驗

前言 easyui是一種基於jQuery的使用者介面外掛集合，它為建立現代化，互動，JavaScript應用程式，提供必要的功能，完美支援HTML5網頁的完整框架，節省網頁開發的時間和規模。非常的簡單易學。今天我們來學習表單校驗以及如何自定義表單校驗正文一、從標記建立驗證框（vali

Javascript 表單校驗的三種方法

javascript——表單校驗工具程式碼

function changeImg(img){ //改變img標籤中 src的值，實現重新載入的功能每次的訪問地址都不一樣，因為有變數加入，所以每次都會訪問新的資源。 img.src = img.src+"?time

JQuery中內容操作函數、validation表單校驗

調用方法 scrip 註意語言 rul asc javascrip 最前面插入獲取 JQuery:內容體拼接（可以直接拼接元素節點和內容節點）　　JQuery實現：　　　　方案1：A.append(B); == B.appendTo(A);A的後面拼接B 　　　

JavaScript學習——完善註冊頁面表單校驗

函數提示步驟表格 ges function img 但是最終 1、之前我們已經使用彈出框的方式實現了表單校驗的功能，但是此種方式用戶體驗效果很差我們希望做成把提示信息和校驗結果放在輸入欄的後面。 2、步驟分析（此案例基於HTML&CSS——網站註冊頁面實

表單校驗的值$valid、$invalid、$pristine和$dirty

狀態 ng- 愛好定義 ida from 用戶操作 num $set angular內置了一套表單校驗，其中包含幾個狀態 ① valid、invalid、pristine和dirty 　　valid標記表單元素有效；　　invalid標記表單元素無效；　　pristi

JavaScript完成簡單的表單校驗案例

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>註冊介面</title> <script type="text/javascript">

JavaScript進階（四）form表單校驗

前言本章將學習表單的校驗，作為一個前面學習的總結！方法 1.概念我們知道，在學習HTML的時候，我們做了一個非常醜陋的表單，裡面有文字框、單選鈕、複選框等一系列表單元素。這些都是隨便填寫的，沒有加任何的校驗。也就是說正常情況下我們需

javascript封裝（表單校驗）

先上圖：產品的需求是點選框內輸入時不提示錯誤，等滑鼠離開時校驗錯誤，那我就這樣寫 //增加提示程式碼 $.prototype.accounterror=function(info){ $(this).next("span").remove(); $(this).aft

JSP表單提交和表單校驗

function validate_channel_info(channelform) { if(channelform.channelname.value=="")

javascript之表單校驗以及正則表示式

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/java

struts2校驗、ajax校驗、javascript驗證有何區別及聯絡？

Struts2的validate資料校驗有兩種方式：1. Action中的validate()方法Struts2提供了一個Validateable介面，這個介面中只存在validate()方法，實現這個介面的類可直接被Struts2呼叫，ActionSupport類就實現了Vadidateable介面，

使用JavaScript實現表單校驗

使用JavaScript實現表單驗證最近在學習JavaScript，因此想到使用js實現表單校驗。上網查詢了很多的方法和遇到的問題，現在問題都一一解決，特此陳述案例實現步驟及遇到的問題。文字框校驗以下是文字框的校驗步驟。 1.獲取待校驗的

javascript高階之表單校驗

表單校驗是指:規範資料的輸入格式: 方式一: 思路:(1)建立一個form標籤,使用onsumbit事件 (2)建立文字輸入項,建立submit提交按鈕, (3)使用繫結的第一種方式:1根據id拿到標籤物件,在根據標籤物件拿到該標籤的value值 2if判斷為

表單校驗常用原生js庫

rim pro fun 常用 ltrim turn () js庫 his 1.字符串去除左右空格繼承形式// 除去左右空格String.prototype.Trim = function() { return this.replace(/(^\s*)|(\s*$)/g,

常用表單校驗

通過 let div 返回 letter 常用 fun als 英文 /*用途：檢查輸入字符串是否只由英文字母和數字組成輸入：obj 字符串返回：如果通過驗證返回true,否則返回false*/ function isNumberOrLetter(obj){

Angular 表單校驗

result tex lar uil img 輸入 password value mod 1.html <form [formGroup]="formModel" (submit)="submit()"> <div> 用戶名

JavaScript的表單校驗、ajax提交和資料渲染的流程

相關推薦