前端数据校验从建模开始

栏目: CSS · 发布时间: 6年前

内容简介：前端开发过程中你们觉得处理什么业务功能最烦人？做前端已经有很长一段时间了，不知道大家是否和我有同样的感受，在一些 Web 应用中表单处理起来比其他功能模块都麻烦，很多体力活。往往在数据的校验会很费时间。为了能够把这部分代码更有条理,我们把数据校验部分通过 Schema 预先定义一个数据模型，把数据扔进去，返回校验结果。

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

做前端已经有很长一段时间了，不知道大家是否和我有同样的感受，在一些 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: '两次密码不一致'
  }
};
**/

API

StringType
NumberType
ArrayType
DateType
ObjectType
BooleanType

StringType

isRequired()

StringType().isRequired('该字段不能为空');

isEmail(String: errorMessage)

StringType().isEmail('请输入正确的邮箱地址');

isURL(String: errorMessage)

StringType().isURL('请输入正确的URL地址');

isOneOf(Array: items, String: errorMessage)

StringType().isOneOf(['Javascript', 'CSS'], '只能输入 `Javascript`和 `CSS`');

containsLetter(String: errorMessage)

StringType().containsLetter('必须包含英文字符');

containsUppercaseLetter(String: errorMessage)

StringType().containsUppercaseLetter('必须包含大写的英文字符');

containsLowercaseLetter(String: errorMessage)

StringType().containsLowercaseLetter('必须包含小写的英文字符');

containsLetterOnly(String: errorMessage)

StringType().containsLetterOnly('只能包含的英文字符');

containsNumber(String: errorMessage)

StringType().containsNumber('必须包含数字');

pattern(Object: regexp, String: errorMessage)

StringType().pattern(/^[1-9][0-9]{3}\s?[a-zA-Z]{2}$/, '请输入合法字符');

rangeLength(Number: minLength, Number: maxLength, String: errorMessage)

StringType().rangeLength(6, 30, '字符个数只能在 6 - 30 之间');

minLength(Number: minLength, String: errorMessage)

StringType().minLength(6, '最小需要6个字符');

maxLength(Number: maxLength, String: errorMessage)

StringType().minLength(30, '最大只能30个字符');

addRule(Function: onValid, String: errorMessage)

StringType().addRule((value, data) => {
  return /^[1-9][0-9]{3}\s?[a-zA-Z]{2}$/.test(value);
}, '请输入合法字符');

NumberType

isRequired()

NumberType().isRequired('该字段必填');

isInteger(String: errorMessage)

NumberType().isInteger('只能是整型');

isOneOf(Array: items, String: errorMessage)

NumberType().isOneOf([5, 10, 15], '只能是`5`,`10`,`15`');

pattern(Object: regexp, String: errorMessage)

NumberType().pattern(/^[1-9][0-9]{3}$/, '请输入合法字符');

range(Number: minLength, Number: maxLength, String: errorMessage)

NumberType().range(18, 40, '请输入 18 - 40 之间的数字');

min(Number: min, String: errorMessage)

NumberType().min(18, '最小值 18');

max(Number: min, String: errorMessage)

NumberType().max(40, '最大值 40');

addRule(Function: onValid, String: errorMessage)

NumberType().addRule((value, data) => {
  return value % 5 === 0;
}, '请输入有效的数字');

ArrayType

isRequired()

ArrayType().isRequired('该字段必填');

rangeLength(Number: minLength, Number: maxLength, String: errorMessage)

ArrayType().rangeLength(1, 3, '至少选择1个，但不能超过3个');

minLength(Number: minLength, String: errorMessage)

ArrayType().minLength(1, '至少选择1个');

maxLength(Number: maxLength, String: errorMessage)

ArrayType().maxLength(3, '不能超过3个');

unrepeatable(String: errorMessage)

ArrayType().unrepeatable('不能出现重复选项');

of(Object: type, String: errorMessage)

ArrayType().of(StringType().isEmail(), '格式错误');

addRule(Function: onValid, String: errorMessage)

ArrayType().addRule((value, data) => {
  return value.length % 2 === 0;
}, '好事成双');

DateType

isRequired()

DateType().isRequired('日期不能为空');

range(Date: min, Date: max, String: errorMessage)

DateType().range(
  new Date('08/01/2017'),
  new Date('08/30/2017'),
  '时间应该在 08/01/2017 - 08/30/2017 之间'
);

min(Date: min, String: errorMessage)

DateType().min(new Date('08/01/2017'), '时间的最小值 08/01/2017');

max(Date: max, String: errorMessage)

DateType().max(new Date('08/30/2017'), '时间的最大值 08/30/2017');

addRule(Function: onValid, String: errorMessage)

DateType().addRule((value, data) => {
  return value.getDay() === 2;
}, '只能选择周二');

ObjectType

isRequired()

ObjectType().isRequired('该对象不能为空');

shape(Object: types)

ObjectType().shape({
  email: StringType().isEmail('应该是一个 email'),
  age: NumberType().min(18, '年龄应该大于18岁')
});

addRule(Function: onValid, String: errorMessage)

ObjectType().addRule((value, data) => {
  if (value.id || value.email) {
    return true;
  }
  return false;
}, 'id 与 email 必须有一个不能为空');

BooleanType

isRequired()

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

addRule(Function: onValid, String: errorMessage)

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

以上所述就是小编给大家介绍的《前端数据校验从建模开始》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Music Recommendation and Discovery

Òscar Celma / Springer / 2010-9-7 / USD 49.95

With so much more music available these days, traditional ways of finding music have diminished. Today radio shows are often programmed by large corporations that create playlists drawn from a limited......一起来看看《Music Recommendation and Discovery》这本书的介绍吧!

码农工具