1. 程式人生 > >JavaScript的表單校驗、ajax提交和資料渲染的流程

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 = /^\
[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>

相關推薦

JavaScriptajax提交資料渲染流程

 下面簡單封裝了一個類似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 的三種方法

<html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title></title>     <style type="text/css">        

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

struts2ajaxjavascript驗證有何區別及聯絡?

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> 用戶名