如何寫校驗函數(shù)

MASAILA 發(fā)布于2019-08-20 16:44 / 858人閱讀

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

前言

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

練習(xí): 通用校驗函數(shù)編寫 思考: 一般校驗有哪幾種情況

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

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

提示語在元素右側(cè) 彈框安全高度640px以內(nèi)

程序具體交互?首先得看產(chǎn)品的需求

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

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

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

一、從上至下校驗

二、對應(yīng)校驗

思路

思路：表驅(qū)動法

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

校驗執(zhí)行的順序，是否中斷校驗的標(biāo)志，校驗函數(shù)返回值

向外暴露錯誤回調(diào)函數(shù)

// 主函數(shù)設(shè)計：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校驗的格式對應(yīng)的函數(shù)
let format = {
    "emailFormat": isEmail,
    "passwordFormat": isPassword,
    "emptyFormat": isEmpty
};
// 4.錯誤回調(diào)
const callback = (errMsg, key) => {
    console.log(errMsg, key);
};
// 5.執(zhí)行順序 函數(shù)返回值已經(jīng)中斷標(biāo)志
// isBreak是否中斷當(dāng)前某個元素的校驗
// result 格式校驗的結(jié)果 true標(biāo)示校驗正確
// isSuccess 校驗主函數(shù)的返回值 true表示校驗成功
// callback 校驗失敗要執(zhí)行的操作
// 一、從上至下校驗
map(() => {
    if (isBreak) {
        return false
    }
})
if (result) {
    // 校驗成功
} else {
    // 校驗失敗
    callback(errMsg, key);
    isBreak = true; // 只要有一個校驗出錯函數(shù)就返回校驗失敗
    isSuccess = false; 
 
}
// 二、對應(yīng)校驗
// 去掉判斷是否中斷當(dāng)前校驗即可

代碼

// 校驗函數(shù)
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)
};
// 錯誤回調(diào)
const callback = (errMsg, key) => {
    console.log(errMsg, key);
};
// 主函數(shù)
const validate = (obj, fields, format, callback) => {
    let isSuccess = true;
    let isBreak = false; // 是否中斷校驗的標(biāo)志
    // obj要校驗的對象,fields校驗提示信息,format校驗的格式,callback校驗錯誤的回調(diào)函數(shù)
    // 函數(shù)返回值
    // 通過健一致來獲取需要的對應(yīng)的值
    Object.keys(obj).map((key) => {
        // 檢測是否中斷map循環(huán)
        if (isBreak) {
            return false
        }
        let formats = fields[key]["type"]; // 獲取校驗的格式
        let errMsg = fields[key]["errMsg"]; // 獲取校驗的錯誤提示語
        let validateFun = format[formats]; // 獲取校驗格式的函數(shù)
        let value = obj[key]; // 要校驗對象的值
        let result = validateFun(value); // 執(zhí)行校驗函數(shù),傳參數(shù)(要校驗對象的值) 返回true為校驗當(dāng)前校驗通過
        if (result) {
            // 校驗成功
            console.log("校驗成功")
        } else {
            // 校驗失敗
            callback(errMsg, key);
            isSuccess = false; // 只要有一個校驗出錯函數(shù)就返回校驗失敗
            isBreak = true;
            console.log("只要有一個錯誤就退出當(dāng)前校驗");
        }
    });
    return isSuccess; // 只要有一個錯誤校驗就不通過
};
// 用法 對應(yīng)校驗需要配合ui一起使用 callback(errMsg, key) key為校驗的元素錯誤信息ui應(yīng)與其相關(guān)聯(lián)是否顯示
// 1.obj 要校驗的元素對象
let obj = {
    "email":"",
    "password": ""
};
// 2.fields要校驗的格式type和錯誤提示信息errMsg
let fields = {
    "email": {
        "type": "emailFormat",
        "errMsg": "郵箱格式錯誤"
    },
    "password": {
        "type": "passwordFormat",
        "errMsg": "密碼格式錯誤"
    }
};
// 3.format校驗的格式對應(yīng)的函數(shù)
let format = {
    "emailFormat": isEmail,
    "passwordFormat": isPassword,
    "emptyFormat": isEmpty
};
// 4.調(diào)用
console.log(validate(obj, fields, format, callback));