前端數(shù)據(jù)校驗(yàn)從建模開始

韓冰發(fā)布于2019-08-23 11:38 / 2457人閱讀

摘要：為了能夠把這部分代碼更有條理我們把數(shù)據(jù)校驗(yàn)部分通過預(yù)先定義一個(gè)數(shù)據(jù)模型，把數(shù)據(jù)扔進(jìn)去，返回校驗(yàn)結(jié)果。接下來我介紹一下這個(gè)工具，是一個(gè)數(shù)據(jù)建模及數(shù)據(jù)驗(yàn)證工具它可以非常方便的設(shè)計(jì)的表單數(shù)據(jù)結(jié)構(gòu)，當(dāng)然它不限于在表單使用。

前端開發(fā)過程中你們覺得處理什么業(yè)務(wù)功能最煩人？

做前端已經(jīng)有很長(zhǎng)一段時(shí)間了，不知道大家是否和我有同樣的感受，在一些 Web 應(yīng)用中表單處理起來比其他功能模塊都麻煩，很多體力活，往往在數(shù)據(jù)的校驗(yàn)會(huì)很費(fèi)時(shí)間。

為了能夠把這部分代碼更有條理,我們把數(shù)據(jù)校驗(yàn)部分通過 Schema 預(yù)先定義一個(gè)數(shù)據(jù)模型，把數(shù)據(jù)扔進(jìn)去，返回校驗(yàn)結(jié)果。

接下來我介紹一下這個(gè)工具，schema-typed 是一個(gè)數(shù)據(jù)建模及數(shù)據(jù)驗(yàn)證工具, 它可以非常方便的設(shè)計(jì)的表單數(shù)據(jù)結(jié)構(gòu)，當(dāng)然它不限于在表單使用。如果你在產(chǎn)品中使用了 React , 那配合 React Suite 的表單組件簡(jiǎn)直就是如虎添翼。

安裝

npm install schema-typed --save

示例

import { SchemaModel, StringType, DateType, NumberType } from "schema-typed";

const userModel = SchemaModel({
  username: StringType().isRequired("用戶名不能為空"),
  email: StringType().isEmail("請(qǐng)輸入正確的郵箱"),
  age: NumberType("年齡應(yīng)該是一個(gè)數(shù)字").range(18, 30, "年齡應(yīng)該在 18 到 30 歲之間")
});

const checkResult = userModel.check({
  username: "foobar",
  email: "[email protected]",
  age: 40
});

console.log(checkResult);

checkResult 返回結(jié)構(gòu)是:

{
    username: { hasError: false },
    email: { hasError: false },
    age: { hasError: true, errorMessage: "年齡應(yīng)該在 18 到 30 歲之間" }
}

多重驗(yàn)證

StringType()
  .minLength(6, "不能少于 6 個(gè)字符")
  .maxLength(30, "不能大于 30 個(gè)字符")
  .isRequired("該字段不能為空");

自定義驗(yàn)證

通過 addRule 函數(shù)自定義一個(gè)規(guī)則。

如果是對(duì)一個(gè)字符串類型的數(shù)據(jù)進(jìn)行驗(yàn)證，可以通過 pattern 方法設(shè)置一個(gè)正則表達(dá)式進(jìn)行自定義驗(yàn)證。

const myModel = SchemaModel({
  field1: StringType().addRule((value, data) => {
    return /^[1-9][0-9]{3}s?[a-zA-Z]{2}$/.test(value);
  }, "請(qǐng)輸入合法字符"),
  field2: StringType().pattern(/^[1-9][0-9]{3}s?[a-zA-Z]{2}$/, "請(qǐng)輸入合法字符")
});

schema.check({ field1: "", field2: "" });

/**
{
  field1: {
    hasError: true,
    errorMessage: "請(qǐng)輸入合法字符"
  },
  field2: {
    hasError: true,
    errorMessage: "請(qǐng)輸入合法字符"
  }
};
**/

自定義驗(yàn)證 - 多字段交叉驗(yàn)證

例如，驗(yàn)證兩次輸入密碼是否一致

const schema = SchemaModel({
  password1: StringType().isRequired("該字段不能為空"),
  password2: StringType().addRule((value, data) => {
    if (value !== data.password1) {
      return false;
    }
    return true;
  }, "兩次密碼不一致")
});

schema.check({ password1: "123456", password2: "root" });

/**
{
  password1: { hasError: false },
  password2: {
    hasError: true,
    errorMessage: "兩次密碼不一致"
  }
};
**/

嵌套對(duì)象

對(duì)于復(fù)雜的嵌套的 Object , 可以使用 ObjectType().shape 方法進(jìn)行定義，比如：

const model = SchemaModel({
  id: NumberType().isRequired("該字段不能為空"),
  name: StringType().isRequired("用戶名不能為空"),
  info: ObjectType().shape({
    email: StringType().isEmail("應(yīng)該是一個(gè) email"),
    age: numberType().min(18, "年齡應(yīng)該大于18歲")
  });
});

另外，更推薦把對(duì)象扁平化設(shè)計(jì)

import { flaser } from "object-flaser";

const model = SchemaModel({
  id: NumberType().isRequired("該字段不能為空"),
  name: StringType().isRequired("用戶名不能為空"),
  "info.email": StringType().isEmail("應(yīng)該是一個(gè) email"),
  "info.age": numberType().min(18, "年齡應(yīng)該大于18歲")
});

const user = flaser({
  id: 1,
  name: "schema-type",
  info: {
    email: "[email protected]",
    age: 17
  }
});

model.check(data);

API

StringType

NumberType

ArrayType

DateType

ObjectType

BooleanType

StringType

isRequired()

StringType().isRequired("該字段不能為空");

isEmail(errorMessage: string)

StringType().isEmail("請(qǐng)輸入正確的郵箱地址");

isURL(errorMessage: string)

StringType().isURL("請(qǐng)輸入正確的URL地址");

isOneOf(items: Array, errorMessage: string)

StringType().isOneOf(["Javascript", "CSS"], "只能輸入 `Javascript`和 `CSS`");

containsLetter(errorMessage: string)

StringType().containsLetter("必須包含英文字符");

containsUppercaseLetter(errorMessage: string)

StringType().containsUppercaseLetter("必須包含大寫的英文字符");

containsLowercaseLetter(errorMessage: string)

StringType().containsLowercaseLetter("必須包含小寫的英文字符");

containsLetterOnly(errorMessage: string)

StringType().containsLetterOnly("只能包含的英文字符");

containsNumber(errorMessage: string)

StringType().containsNumber("必須包含數(shù)字");

pattern(regExp: RegExp, errorMessage: string)

StringType().pattern(/^[1-9][0-9]{3}s?[a-zA-Z]{2}$/, "請(qǐng)輸入合法字符");

rangeLength(minLength: number, maxLength: number, errorMessage: string)

StringType().rangeLength(6, 30, "字符個(gè)數(shù)只能在 6 - 30 之間");

minLength(minLength: number, errorMessage: string)

StringType().minLength(6, "最小需要6個(gè)字符");

maxLength(maxLength: number, errorMessage: string)

StringType().minLength(30, "最大只能30個(gè)字符");

addRule(onValid: Function, errorMessage: string)

StringType().addRule((value, data) => {
  return /^[1-9][0-9]{3}s?[a-zA-Z]{2}$/.test(value);
}, "請(qǐng)輸入合法字符");

NumberType

isRequired()

NumberType().isRequired("該字段必填");

isInteger(errorMessage: string)

NumberType().isInteger("只能是整型");

isOneOf(items: Array, errorMessage: string)

NumberType().isOneOf([5, 10, 15], "只能是`5`,`10`,`15`");

pattern(regExp: RegExp, errorMessage: string)

NumberType().pattern(/^[1-9][0-9]{3}$/, "請(qǐng)輸入合法字符");

range(minLength: number, maxLength: number, errorMessage: string)

NumberType().range(18, 40, "請(qǐng)輸入 18 - 40 之間的數(shù)字");

min(min: number, errorMessage: string)

NumberType().min(18, "最小值 18");

max(max: number, errorMessage: string)

NumberType().max(40, "最大值 40");

addRule(onValid: Function, errorMessage: string)

NumberType().addRule((value, data) => {
  return value % 5 === 0;
}, "請(qǐng)輸入有效的數(shù)字");

ArrayType

isRequired()

ArrayType().isRequired("該字段必填");

rangeLength(minLength: number, maxLength: number, errorMessage: string)

ArrayType().rangeLength(1, 3, "至少選擇1個(gè)，但不能超過3個(gè)");

minLength(minLength: number, errorMessage: string)

ArrayType().minLength(1, "至少選擇1個(gè)");

maxLength(maxLength: number, errorMessage: string)

ArrayType().maxLength(3, "不能超過3個(gè)");

unrepeatable(errorMessage: string)

ArrayType().unrepeatable("不能出現(xiàn)重復(fù)選項(xiàng)");

of(type: Object, errorMessage: string)

ArrayType().of(StringType().isEmail(), "格式錯(cuò)誤");

addRule(onValid: Function, errorMessage: string)

ArrayType().addRule((value, data) => {
  return value.length % 2 === 0;
}, "好事成雙");

DateType

isRequired()

DateType().isRequired("日期不能為空");

range(min: Date, max: Date, errorMessage: string)

DateType().range(
  new Date("08/01/2017"),
  new Date("08/30/2017"),
  "時(shí)間應(yīng)該在 08/01/2017 - 08/30/2017 之間"
);

min(min: Date, errorMessage: string)

DateType().min(new Date("08/01/2017"), "時(shí)間的最小值 08/01/2017");

max(max: Date, errorMessage: string)

DateType().max(new Date("08/30/2017"), "時(shí)間的最大值 08/30/2017");

addRule(onValid: Function, errorMessage: string)

DateType().addRule((value, data) => {
  return value.getDay() === 2;
}, "只能選擇周二");

ObjectType

isRequired()

ObjectType().isRequired("該對(duì)象不能為空");

shape(type: Object)

ObjectType().shape({
  email: StringType().isEmail("應(yīng)該是一個(gè) email"),
  age: numberType().min(18, "年齡應(yīng)該大于18歲")
});

addRule(onValid: Function, errorMessage: string)

ObjectType().addRule((value, data) => {
  if (value.id || value.email) {
    return true;
  }
  return false;
}, "id 與 email 必須有一個(gè)不能為空");

BooleanType

isRequired()

BooleanType().isRequired("該字段不能為空");

addRule(onValid: Function, errorMessage: string)

ObjectType().addRule((value, data) => {
  if (typeof value === "undefined" && A === 10) {
    return false;
  }
  return true;
}, "當(dāng) A 等于 10 的時(shí)候，該值必須為空");

云服務(wù)器 GPU云服務(wù)器大數(shù)據(jù)從零開始從0開始數(shù)據(jù)分析從0開始學(xué)大數(shù)據(jù) 從零開始搭建前端數(shù)據(jù)監(jiān)控系統(tǒng)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97242.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

韓冰

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

ssl證書如何續(xù)費(fèi)?ssl證書到期后如何進(jìn)行續(xù)費(fèi)?

閱讀 3156·2021-11-24 10:24
Linux——Linux驅(qū)動(dòng)之設(shè)備樹編譯環(huán)境搭建實(shí)踐總結(jié)（設(shè)備樹、uboot、內(nèi)核編譯及鏡像燒寫）

閱讀 2966·2021-11-11 16:54
服務(wù)器怎么變成多個(gè)虛擬主機(jī)-我想在服務(wù)器建立虛擬主機(jī)，該怎么做？

閱讀 3086·2021-09-22 15:55
垂直水平居中的

閱讀 2040·2019-08-30 15:44
rem適配移動(dòng)設(shè)備

閱讀 1910·2019-08-29 18:41
多邊形文本區(qū)域自動(dòng)換行，自動(dòng)裁剪，沿著多邊形來排版

閱讀 2773·2019-08-29 13:43
關(guān)于CDN那些事

閱讀 3063·2019-08-29 12:51
Vue同構(gòu)(三): 狀態(tài)與數(shù)據(jù)

閱讀 1200·2019-08-26 12:19

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

前端數(shù)據(jù)校驗(yàn)從建模開始

相關(guān)文章

從0開始構(gòu)建一個(gè)屬于你自己的PHP框架

數(shù)據(jù)挖掘的TO-DO-LIST

發(fā)表評(píng)論

0條評(píng)論

韓冰

男|高級(jí)講師

TA的文章

ssl證書如何續(xù)費(fèi)?ssl證書到期后如何進(jìn)行續(xù)費(fèi)?

Linux——Linux驅(qū)動(dòng)之設(shè)備樹編譯環(huán)境搭建實(shí)踐總結(jié)（設(shè)備樹、uboot、內(nèi)核編譯及鏡像燒寫）

服務(wù)器怎么變成多個(gè)虛擬主機(jī)-我想在服務(wù)器建立虛擬主機(jī)，該怎么做？

垂直水平居中的

rem適配移動(dòng)設(shè)備

多邊形文本區(qū)域自動(dòng)換行，自動(dòng)裁剪，沿著多邊形來排版

關(guān)于CDN那些事

Vue同構(gòu)(三): 狀態(tài)與數(shù)據(jù)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

前端數(shù)據(jù)校驗(yàn)從建模開始

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！