前端数据校验从建模开始

摘要：为了能够把这部分代码更有条理我们把数据校验部分通过预先定义一个数据模型，把数据扔进去，返回校验结果。接下来我介绍一下这个工具，是一个数据建模及数据验证工具它可以非常方便的设计的表单数据结构，当然它不限于在表单使用。

前端开发过程中你们觉得处理什么业务功能最烦人？

做前端已经有很长一段时间了，不知道大家是否和我有同样的感受，在一些 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);

StringType

NumberType

ArrayType

DateType

ObjectType

BooleanType

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);
}, "请输入合法字符");

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;
}, "请输入有效的数字");

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;
}, "好事成双");

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;
}, "只能选择周二");

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 必须有一个不能为空");

isRequired()

BooleanType().isRequired("该字段不能为空");

addRule(onValid: Function, errorMessage: string)

ObjectType().addRule((value, data) => {
  if (typeof value === "undefined" && A === 10) {
    return false;
  }
  return true;
}, "当 A 等于 10 的时候，该值必须为空");