前端开辟过程当中你们以为处置惩罚什么营业功用最烦人？
做前端已经有很长一段时刻了，不知道人人是不是和我有一样的感觉，在一些 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 的时刻，该值必需为空');