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

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

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

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

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

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

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

安裝

npm install schema-typed --save

示例

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

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

const checkResult = userModel.check({
  username: "foobar",
  email: "foo@bar.com",
  age: 40
});

console.log(checkResult);

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

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

多重驗證

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

自定義驗證

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

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

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

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

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

自定義驗證 - 多字段交叉驗證

例如，驗證兩次輸入密碼是否一致

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: "兩次密碼不一致"
  }
};
**/

嵌套對象

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

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

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

import { flaser } from "object-flaser";

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

const user = flaser({
  id: 1,
  name: "schema-type",
  info: {
    email: "schema-type@gmail.com",
    age: 17
  }
});

model.check(data);

API

StringType

NumberType

ArrayType

DateType

ObjectType

BooleanType

StringType

isRequired()

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

isEmail(errorMessage: string)

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

isURL(errorMessage: string)

StringType().isURL("請輸入正確的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}$/, "請輸入合法字符");

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

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

minLength(minLength: number, errorMessage: string)

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

maxLength(maxLength: number, errorMessage: string)

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

addRule(onValid: Function, errorMessage: string)

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

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}$/, "請輸入合法字符");

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

NumberType().range(18, 40, "請輸入 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;
}, "請輸入有效的數(shù)字");

ArrayType

isRequired()

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

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

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

minLength(minLength: number, errorMessage: string)

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

maxLength(maxLength: number, errorMessage: string)

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

unrepeatable(errorMessage: string)

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

of(type: Object, errorMessage: string)

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

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"),
  "時間應(yīng)該在 08/01/2017 - 08/30/2017 之間"
);

min(min: Date, errorMessage: string)

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

max(max: Date, errorMessage: string)

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

addRule(onValid: Function, errorMessage: string)

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

ObjectType

isRequired()

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

shape(type: Object)

ObjectType().shape({
  email: StringType().isEmail("應(yīng)該是一個 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 必須有一個不能為空");

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 的時候，該值必須為空");

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/97242.html

發(fā)表評論

登陸后可評論

0條評論

韓冰

男|高級講師

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

TA的文章

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

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

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

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

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

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

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

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

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

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

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

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

發(fā)表評論

0條評論

韓冰

男|高級講師

TA的文章

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

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

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

垂直水平居中的

rem適配移動設(shè)備

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

關(guān)于CDN那些事

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

最新活動

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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