前端數據校驗從建模開始

韓冰發布于2019-08-23 11:38 / 2449人閱讀

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

前端開發過程中你們覺得處理什么業務功能最煩人？

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

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

接下來我介紹一下這個工具，schema-typed 是一個數據建模及數據驗證工具, 它可以非常方便的設計的表單數據結構，當然它不限于在表單使用。如果你在產品中使用了 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("年齡應該是一個數字").range(18, 30, "年齡應該在 18 到 30 歲之間")
});

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

console.log(checkResult);

checkResult 返回結構是:

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

多重驗證

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

自定義驗證

通過 addRule 函數自定義一個規則。

如果是對一個字符串類型的數據進行驗證，可以通過 pattern 方法設置一個正則表達式進行自定義驗證。

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

嵌套對象

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

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

另外，更推薦把對象扁平化設計

import { flaser } from "object-flaser";

const model = SchemaModel({
  id: NumberType().isRequired("該字段不能為空"),
  name: StringType().isRequired("用戶名不能為空"),
  "info.email": StringType().isEmail("應該是一個 email"),
  "info.age": numberType().min(18, "年齡應該大于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("必須包含數字");

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, "字符個數只能在 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 之間的數字");

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;
}, "請輸入有效的數字");

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("不能出現重復選項");

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"),
  "時間應該在 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("應該是一個 email"),
  age: numberType().min(18, "年齡應該大于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;
}, "當 A 等于 10 的時候，該值必須為空");

GPU云服務器云服務器大數據從零開始從0開始數據分析從0開始學大數據從零開始搭建前端數據監控系統

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97242.html

從0開始構建一個屬于你自己的PHP框架

摘要：如何構建一個自己的框架為什么我們要去構建一個自己的框架可能絕大多數的人都會說市面上已經那么多的框架了，還造什么輪子。 showImg(https://segmentfault.com/img/bVNg9F?w=500&h=500); 如何構建一個自己的PHP框架為什么我們要去構建一個自己的PHP框架？可能絕大多數的人都會說市面上已經那么多的框架了，還造什么輪子？。我的觀點造輪子不是目...

vpants 2019-06-27 16:26 評論0 收藏0
數據挖掘的TO-DO-LIST

摘要：數據挖掘的流程與方法任務關聯分析聚類分析分類分析異常分析特異組群分析演變分析方法統計在線處理分析情報檢索機器學習分類實際應用應用分類趨勢預測推薦關聯類商品回歸分析實際應用預測銷售趨勢聚類實際應用分類關聯規則包括兩個階段從海量數據中找到高頻項數據挖掘的流程與方法 1.任務: 關聯分析聚類分析分類分析異常分析特異組群分析演變分析 2.方法: 統計在線處理分析情報檢索 ...

wangxinarhat 2019-07-31 11:29 評論0 收藏0

發表評論

登陸后可評論

0條評論

韓冰

男|高級講師

我要關注我要私信

TA的文章

ssl證書如何續費?ssl證書到期后如何進行續費?

閱讀 3138·2021-11-24 10:24
Linux——Linux驅動之設備樹編譯環境搭建實踐總結（設備樹、uboot、內核編譯及鏡像燒寫）

閱讀 2930·2021-11-11 16:54
服務器怎么變成多個虛擬主機-我想在服務器建立虛擬主機，該怎么做？

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

閱讀 2027·2019-08-30 15:44
rem適配移動設備

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

閱讀 2761·2019-08-29 13:43
關于CDN那些事

閱讀 3053·2019-08-29 12:51
Vue同構(三): 狀態與數據

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

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

前端數據校驗從建模開始

相關文章

從0開始構建一個屬于你自己的PHP框架

數據挖掘的TO-DO-LIST

發表評論

0條評論

韓冰

男|高級講師

TA的文章

ssl證書如何續費?ssl證書到期后如何進行續費?

Linux——Linux驅動之設備樹編譯環境搭建實踐總結（設備樹、uboot、內核編譯及鏡像燒寫）

服務器怎么變成多個虛擬主機-我想在服務器建立虛擬主機，該怎么做？

垂直水平居中的

rem適配移動設備

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

關于CDN那些事

Vue同構(三): 狀態與數據

最新活動

資訊專欄INFORMATION COLUMN

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

前端數據校驗從建模開始

相關文章

發表評論

0條評論

男|高級講師

TA的文章

最新活動

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