前端資料校驗從建模開始

漆工發表於2018-08-30
前端

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

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

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

接下來我介紹一下這個工具，schema-typed 是一個資料建模及資料驗證工具, 它可以非常方便的設計的表單資料結構，當然它不限於在表單使用。如果你在產品中使用了 React , 那配合 React Suite 的表單元件簡直就是如虎添翼。

安裝

npm install schema-typed --save
複製程式碼

示例

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

const model = SchemaModel({
  username: StringType().isRequired('使用者名稱不能為空'),
  email: StringType().isEmail('請輸入正確的郵箱'),
  age: NumberType('年齡應該是一個數字').range(18, 30, '年齡應該在 18 到 30 歲之間')
});

const checkResult = model.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 model = 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}$/, '請輸入合法字元')
});

model.check({ field1: '', field2: '' });

/**
{
  field1: {
    hasError: true,
    errorMessage: '請輸入合法字元'
  },
  field2: {
    hasError: true,
    errorMessage: '請輸入合法字元'
  }
};
**/
複製程式碼

自定義驗證 - 多欄位交叉驗證

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

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

model.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);
複製程式碼

組合

SchemaModel 提供了一個靜態方法 combine, 可以對多個 SchemaModel 合併返回一個新的 SchemaModel。

const model1 = SchemaModel({
  username: StringType().isRequired('使用者名稱不能為空'),
  email: StringType().isEmail('請輸入正確的郵箱')
});

const model2 = SchemaModel({
  username: StringType().minLength(7, '最少7個字元'),
  age: NumberType().range(18, 30, '年應該在 18 到 30 歲')
});

const model3 = SchemaModel({
  groupId: NumberType().isRequired('該欄位不能為空')
});

const model4 = SchemaModel.combine(model1, model2, model3);

model4.check({
  username: 'foobar',
  email: 'foo@bar.com',
  age: 40,
  groupId: 1
});
複製程式碼

API

  • SchemaModel
  • StringType
  • NumberType
  • ArrayType
  • DateType
  • ObjectType
  • BooleanType

SchemaModel

  • check(data: Object)
const model = SchemaModel({
  username: StringType().isRequired('該欄位不能為空'),
  email: StringType().isEmail('請輸入正確的郵箱')
});

model.check({
  username: 'root',
  email: 'root@email.com'
});
複製程式碼
  • checkForField(fieldName: string, fieldValue: any, data: Object)
const model = SchemaModel({
  username: StringType().isRequired('該欄位不能為空'),
  email: StringType().isEmail('請輸入正確的郵箱')
});

model.checkForField('username', 'root');
複製程式碼

StringType

  • isRequired(errorMessage: string)
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(errorMessage: string)
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(errorMessage: string)
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(errorMessage: string)
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(errorMessage: string)
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(errorMessage: string)
BooleanType().isRequired('該欄位不能為空');
複製程式碼
  • addRule(onValid: Function, errorMessage: string)
ObjectType().addRule((value, data) => {
  if (typeof value === 'undefined' && A === 10) {
    return false;
  }
  return true;
}, '當 A 等於 10 的時候，該值必須為空');
複製程式碼

相關文章