前端数据校验从建模开始

前端数据校验从建模开始

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

做前端已经有很长一段时间了,不知道大家是否和我有同样的感受,在一些 Web 应用中表单处理起来比其他功能模块都麻烦,很多体力活,往往在数据的校验会很费时间。

为了能够把这部分代码更有条理,我们把数据校验部分通过 Schema 预先定义一个数据模型,把数据扔进去,返回校验结果。

接下来我介绍一下这个工具, schema-typed 是一个数据建模及数据验证工具, 它可以非常方便的设计的表单数据结构,当然它不限于在表单使用。如果你在产品中使用了 React , 那配合 React Suite 的表单组件简直就是如虎添翼。

安装

示例

checkResult 返回结构是:

多重验证

自定义验证

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

如果是对一个字符串类型的数据进行验证,可以通过 pattern 方法设置一个正则表达式进行自定义验证。

自定义验证 - 多字段交叉验证

例如,验证两次输入密码是否一致

API

  • StringType
  • NumberType
  • ArrayType
  • DateType
  • ObjectType
  • BooleanType

StringType

  • isRequired()
  • isEmail(errorMessage: string)
  • isURL(errorMessage: string)
  • isOneOf(items: Array, errorMessage: string)
  • containsLetter(errorMessage: string)
  • containsUppercaseLetter(errorMessage: string)
  • containsLowercaseLetter(errorMessage: string)
  • containsLetterOnly(errorMessage: string)
  • containsNumber(errorMessage: string)
  • pattern(regExp: RegExp, errorMessage: string)
  • rangeLength(minLength: number, maxLength: number, errorMessage: string)
  • minLength(minLength: number, errorMessage: string)
  • maxLength(maxLength: number, errorMessage: string)
  • addRule(onValid: Function, errorMessage: string)

NumberType

  • isRequired()
  • isInteger(errorMessage: string)
  • isOneOf(items: Array, errorMessage: string)
  • pattern(regExp: RegExp, errorMessage: string)
  • range(minLength: number, maxLength: number, errorMessage: string)
  • min(min: number, errorMessage: string)
  • max(max: number, errorMessage: string)
  • addRule(onValid: Function, errorMessage: string)

ArrayType

  • isRequired()
  • rangeLength(minLength: number, maxLength: number, errorMessage: string)
  • minLength(minLength: number, errorMessage: string)
  • maxLength(maxLength: number, errorMessage: string)
  • unrepeatable(errorMessage: string)
  • of(type: Object, errorMessage: string)
  • addRule(onValid: Function, errorMessage: string)

DateType

  • isRequired()
  • range(min: Date, max: Date, errorMessage: string)
  • min(min: Date, errorMessage: string)
  • max(max: Date, errorMessage: string)
  • addRule(onValid: Function, errorMessage: string)

ObjectType

  • isRequired()
  • shape(type: Object)
  • addRule(onValid: Function, errorMessage: string)

BooleanType

  • isRequired()
  • addRule(onValid: Function, errorMessage: string)
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复