前言

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

練習: 通用校驗函數編寫

思考: 一般校驗有哪幾種情況

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

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

提示語在元素右側 彈框安全高度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));

總結

以上是生活随笔為你收集整理的如何写校验函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。