前端數據校驗從建模開始
前端開發過程中你們覺得處理什麼業務功能最煩人？
做前端已經有很長一段時間了，不知道大家是否和我有同樣的感受，在一些 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: [email protected],
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: [email protected],
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: [email protected],
age: 40,
groupId: 1
});
API
- SchemaModel
- StringType
- NumberType
- ArrayType
- DateType
- ObjectType
- BooleanType
SchemaModel
staticcombine(...models)
const model1 = SchemaModel({
username: StringType().isRequired(用戶名不能為空)
});
const model2 = SchemaModel({
email: StringType().isEmail(請輸入正確的郵箱)
});
const model3 = SchemaModel.combine(model1, model2);
- check(data: Object)
const model = SchemaModel({
username: StringType().isRequired(該欄位不能為空),
email: StringType().isEmail(請輸入正確的郵箱)
});
model.check({
username: root,
email: [email protected]
});
- 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 的時候，該值必須為空);
推薦閱讀：
