如何寫校驗函數

MASAILA 發布于2019-08-20 16:44 / 864人閱讀

摘要：前言在項目中經常會用到表單的校驗，前端校驗會減少對服務器的壓力并且能提升用戶體驗，達到各種交互效果練習通用校驗函數編寫思考一般校驗有哪幾種情況從上至下提示語只有一個位置只顯示錯誤的第一條標紅不標紅錯誤的相關項每個元素下方提示當前元素的錯誤提

前言

在項目中經常會用到表單的校驗，前端校驗會減少對服務器的壓力并且能提升用戶體驗，達到各種交互效果

練習: 通用校驗函數編寫 思考: 一般校驗有哪幾種情況

從上至下,提示語只有一個位置只顯示錯誤的第一條(標紅/不標紅錯誤的相關項)

每個元素下方提示當前元素的錯誤提示不適合以彈框的形式顯示

提示語在元素右側彈框安全高度640px以內

程序具體交互?首先得看產品的需求

從上至下校驗,只提示按順序錯誤的第一個錯誤信息,失去焦點/值改變立馬校驗(前提是已經點擊過提交按鈕了),標紅/不標紅相應錯誤的元素

同上,只是錯誤提示以toast形式顯示

校驗通過再激活提交按鈕,某些還要禁止重復訪問(用定時器設置禁止時間長度) 這種適合校驗內容少且校驗規則是大家普遍有共識的

一、從上至下校驗

二、對應校驗

思路

思路：表驅動法

設計校驗提示信息表校驗規則表校驗元素表（表的健值對必須要一致，方便通過相同的健獲取對應表值）

校驗執行的順序，是否中斷校驗的標志，校驗函數返回值

向外暴露錯誤回調函數

// 主函數設計：validate(obj, fields, format, callback)
// 說明：
// 1.obj 要校驗的元素對象
let obj = {
    "email":"",
    "password": ""
};
// 2.fields要校驗的格式type和錯誤提示信息errMsg
let fields = {
    "email": {
        "type": "emailFormat",
        "errMsg": "郵箱格式錯誤"
    },
    "password": {
        "type": "passwordFormat",
        "errMsg": "密碼格式錯誤"
    }
};
// 3.format校驗的格式對應的函數
let format = {
    "emailFormat": isEmail,
    "passwordFormat": isPassword,
    "emptyFormat": isEmpty
};
// 4.錯誤回調
const callback = (errMsg, key) => {
    console.log(errMsg, key);
};
// 5.執行順序 函數返回值已經中斷標志
// isBreak是否中斷當前某個元素的校驗
// result 格式校驗的結果 true標示校驗正確
// isSuccess 校驗主函數的返回值 true表示校驗成功
// callback 校驗失敗要執行的操作
// 一、從上至下校驗
map(() => {
    if (isBreak) {
        return false
    }
})
if (result) {
    // 校驗成功
} else {
    // 校驗失敗
    callback(errMsg, key);
    isBreak = true; // 只要有一個校驗出錯函數就返回校驗失敗
    isSuccess = false; 
 
}
// 二、對應校驗
// 去掉判斷是否中斷當前校驗即可

代碼

// 校驗函數
const isEmpty = function (str) {
    return str === null || typeof str === "undefined" || str.replace(/^s+|s+$/g, "") ? true : false
};
const isEmail = function (str) {
    return pattern.email.test(str)
};
const isPassword = function (str) {
    return pattern.password.test(str)
};
// 錯誤回調
const callback = (errMsg, key) => {
    console.log(errMsg, key);
};
// 主函數
const validate = (obj, fields, format, callback) => {
    let isSuccess = true;
    let isBreak = false; // 是否中斷校驗的標志
    // obj要校驗的對象,fields校驗提示信息,format校驗的格式,callback校驗錯誤的回調函數
    // 函數返回值
    // 通過健一致來獲取需要的對應的值
    Object.keys(obj).map((key) => {
        // 檢測是否中斷map循環
        if (isBreak) {
            return false
        }
        let formats = fields[key]["type"]; // 獲取校驗的格式
        let errMsg = fields[key]["errMsg"]; // 獲取校驗的錯誤提示語
        let validateFun = format[formats]; // 獲取校驗格式的函數
        let value = obj[key]; // 要校驗對象的值
        let result = validateFun(value); // 執行校驗函數,傳參數(要校驗對象的值) 返回true為校驗當前校驗通過
        if (result) {
            // 校驗成功
            console.log("校驗成功")
        } else {
            // 校驗失敗
            callback(errMsg, key);
            isSuccess = false; // 只要有一個校驗出錯函數就返回校驗失敗
            isBreak = true;
            console.log("只要有一個錯誤就退出當前校驗");
        }
    });
    return isSuccess; // 只要有一個錯誤校驗就不通過
};
// 用法 對應校驗需要配合ui一起使用 callback(errMsg, key) key為校驗的元素錯誤信息ui應與其相關聯是否顯示
// 1.obj 要校驗的元素對象
let obj = {
    "email":"",
    "password": ""
};
// 2.fields要校驗的格式type和錯誤提示信息errMsg
let fields = {
    "email": {
        "type": "emailFormat",
        "errMsg": "郵箱格式錯誤"
    },
    "password": {
        "type": "passwordFormat",
        "errMsg": "密碼格式錯誤"
    }
};
// 3.format校驗的格式對應的函數
let format = {
    "emailFormat": isEmail,
    "passwordFormat": isPassword,
    "emptyFormat": isEmpty
};
// 4.調用
console.log(validate(obj, fields, format, callback));

GPU云服務器云服務器 php寫回調函數 java如何校驗數字匯編寫c語言函數 js如何校驗兩位小數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83120.html

使用vue自定義指令開發一個表單驗證插件validate.js

摘要：今天就來介紹一下如何利用的自定義指令來開發一個表單驗證插件的過程。按照這種方式就能夠使用自己開發的這個表單校驗插件。這段時間在進行一個新項目的前期搭建，新項目框架采用vue-cli3和typescirpt搭建。因為項目比較輕量，所以基本沒有使用額外的ui組件，有時候我們需要的一些基礎組件我就直接自己開發了。今天就來介紹一下如何利用vue的自定義指令directive來開發一個表單驗證插件的過...

warnerwu 2019-05-23 17:26 評論0 收藏0
使用 EOLINKER 進行接口測試的最佳路徑 (上)

摘要：創建測試環境并導入到用例集操作步驟如下動態圖創建測試環境并導入到用例集動態圖說明第一個頁面為測試項目列表頁面。第三個頁面為前置用例集列表頁面。本文內容：測試腳本管理：講述如何在 EOLINKER 上設計測試項目目錄結構。編寫測試腳本：講述如何在 EOLINKER 上編寫接口測試腳本。測試腳本執行及報告：講述如何在 EOLINKER 上執行接口測試腳本，及如何查看和下載測試報告...

lordharrd 2019-08-02 12:06 評論0 收藏0
使用 EOLINKER 進行接口測試的最佳路徑 (上)

摘要：創建測試環境并導入到用例集操作步驟如下動態圖創建測試環境并導入到用例集動態圖說明第一個頁面為測試項目列表頁面。第三個頁面為前置用例集列表頁面。本文內容：測試腳本管理：講述如何在 EOLINKER 上設計測試項目目錄結構。編寫測試腳本：講述如何在 EOLINKER 上編寫接口測試腳本。測試腳本執行及報告：講述如何在 EOLINKER 上執行接口測試腳本，及如何查看和下載測試報告...

plokmju88 2019-07-01 10:59 評論0 收藏0
一塊小餅干(Cookie)的故事-上篇

摘要：如果非要用漢語理解的話應該是一段小型文本文件，由網景的創始人之一的盧蒙特利在年發明。上述的套路會一直用下去，的組合。應該填入信息后，錯誤信息就消失的。 cookie 如果非要用漢語理解的話應該是一段小型文本文件，由網景的創始人之一的盧蒙特利在93年發明。上篇是熟悉一下注冊的大致流程，下篇熟悉登錄流程以及真正的Cookie 實現基本的注冊功能我們打開網站，瀏覽網站，最常見的兩個操...

wums 2019-08-26 11:40 評論0 收藏0