前端数据校验从建模开始

栏目: 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 的时候，该值必须为空');

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

查看所有标签

猜你喜欢:

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

码农书籍

Java Web开发实战经典（基础篇）

李兴华、王月清 / 清华大学出版社 / 2010-8 / 69.80元

本书用通俗易懂的语言和丰富多彩的实例，通过对Ajax、JavaScript、HTML等Web系统开发技术基础知识的讲解，并结合MVC设计模式的理念，详细讲述了使用JSP及Struts框架进行Web系统开发的相关技术。全书分4部分共17章，内容包括Java Web开发简介，HTML、JavaScript简介，XML简介，Tomcat服务器的安装及配置，JSP基础语法，JSP内置对象，Java......一起来看看《Java Web开发实战经典（基础篇）》这本书的介绍吧!

码农工具

UNIX 时间戳转换

HEX CMYK 转换工具

HEX CMYK 互转工具