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

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

從上至下,提示語(yǔ)只有一個(gè)位置只顯示錯(cuò)誤的第一條(標(biāo)紅/不標(biāo)紅錯(cuò)誤的相關(guān)項(xiàng))

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

提示語(yǔ)在元素右側(cè) 彈框安全高度640px以?xún)?nèi)

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

同上,只是錯(cuò)誤提示以toast形式顯示

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

思路：表驅(qū)動(dòng)法

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

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

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

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

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