成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

如何寫校驗函數(shù)

MASAILA / 863人閱讀

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

前言

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

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

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

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

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

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

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

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

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

一、從上至下校驗

二、對應校驗


思路

思路：表驅動法

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

校驗執(zhí)行的順序，是否中斷校驗的標志，校驗函數(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校驗的格式對應的函數(shù)
let format = {
    "emailFormat": isEmail,
    "passwordFormat": isPassword,
    "emptyFormat": isEmpty
};
// 4.錯誤回調
const callback = (errMsg, key) => {
    console.log(errMsg, key);
};
// 5.執(zhí)行順序 函數(shù)返回值已經中斷標志
// isBreak是否中斷當前某個元素的校驗
// result 格式校驗的結果 true標示校驗正確
// isSuccess 校驗主函數(shù)的返回值 true表示校驗成功
// callback 校驗失敗要執(zhí)行的操作
// 一、從上至下校驗
map(() => {
    if (isBreak) {
        return false
    }
})
if (result) {
    // 校驗成功
} else {
    // 校驗失敗
    callback(errMsg, key);
    isBreak = true; // 只要有一個校驗出錯函數(shù)就返回校驗失敗
    isSuccess = false; 
 
}
// 二、對應校驗
// 去掉判斷是否中斷當前校驗即可
代碼 
// 校驗函數(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)
};
// 錯誤回調
const callback = (errMsg, key) => {
    console.log(errMsg, key);
};
// 主函數(shù)
const validate = (obj, fields, format, callback) => {
    let isSuccess = true;
    let isBreak = false; // 是否中斷校驗的標志
    // obj要校驗的對象,fields校驗提示信息,format校驗的格式,callback校驗錯誤的回調函數(shù)
    // 函數(shù)返回值
    // 通過健一致來獲取需要的對應的值
    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為校驗當前校驗通過
        if (result) {
            // 校驗成功
            console.log("校驗成功")
        } else {
            // 校驗失敗
            callback(errMsg, key);
            isSuccess = false; // 只要有一個校驗出錯函數(shù)就返回校驗失敗
            isBreak = true;
            console.log("只要有一個錯誤就退出當前校驗");
        }
    });
    return isSuccess; // 只要有一個錯誤校驗就不通過
};
// 用法 對應校驗需要配合ui一起使用 callback(errMsg, key) key為校驗的元素錯誤信息ui應與其相關聯(lián)是否顯示
// 1.obj 要校驗的元素對象
let obj = {
    "email":"",
    "password": ""
};
// 2.fields要校驗的格式type和錯誤提示信息errMsg
let fields = {
    "email": {
        "type": "emailFormat",
        "errMsg": "郵箱格式錯誤"
    },
    "password": {
        "type": "passwordFormat",
        "errMsg": "密碼格式錯誤"
    }
};
// 3.format校驗的格式對應的函數(shù)
let format = {
    "emailFormat": isEmail,
    "passwordFormat": isPassword,
    "emptyFormat": isEmpty
};
// 4.調用
console.log(validate(obj, fields, format, callback));

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

轉載請注明本文地址：http://systransis.cn/yun/83120.html

相關文章

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

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

    warnerwu 評論0 收藏0

  • 使用 EOLINKER 進行接口測試的最佳路徑 (上)

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

    lordharrd 評論0 收藏0

  • 使用 EOLINKER 進行接口測試的最佳路徑 (上)

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

    plokmju88 評論0 收藏0

  • 一塊小餅干(Cookie)的故事-上篇

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

    wums 評論0 收藏0

發(fā)表評論

0條評論

MASAILA

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<