前端数据校验从建模开始

时间  2021-08-12
标签 前端 git github 正则表达式 npm bash markdown 数据结构 函数 工具 栏目 Git 繁體版
原文   原文链接

前端开发过程当中大家以为处理什么业务功能最烦人？前端

作前端已经有很长一段时间了，不知道你们是否和我有一样的感觉，在一些 Web 应用中表单处理起来比其余功能模块都麻烦，不少体力活，每每在数据的校验会很费时间。git

为了可以把这部分代码更有条理,咱们把数据校验部分经过 Schema 预先定义一个数据模型，把数据扔进去，返回校验结果。github

接下来我介绍一下这个工具，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 返回结构是:npm

{
    username: { hasError: false },
    email: { hasError: false },
    age: { hasError: true, errorMessage: '年龄应该在 18 到 30 岁之间' }
}
复制代码

多重验证

StringType()
  .minLength(6, '不能少于 6 个字符')
  .maxLength(30, '不能大于 30 个字符')
  .isRequired('该字段不能为空');
复制代码

自定义验证

经过 addRule 函数自定义一个规则。bash

若是是对一个字符串类型的数据进行验证，能够经过 pattern 方法设置一个正则表达式进行自定义验证。markdown

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 的时候，该值必须为空');
复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程