TS-VALIDATOR

点击查看DEMO

简介

验证框架的初衷来源项目需要，当项目面临复杂表单的时候，验证信息会充斥把整个表单代码，要么就是类似antd那样的去手动关联，但是我更希望通过约定来完成，这样可以减少代码量，不过要牺牲部分自由度。再次就是目前市面上的框架都是针对表单元素进行验证，而在我们自身的项目里有这各种带数据的非表单组件，这些组件也需要被验证，这时候基本都需要靠手写，而本组件剥离了逻辑和视图，你只需要关心逻辑即可，而且只要实现了相应的规范，不论什么样的组件都可以被验证。

技术

该框架基于react和react-dom，版本是15.6.1。源码采用typescript完成。

核心接口

import { createValidator, createValidateComponent, createValidateForm } from 'ts-validator'

createValidator(conditons)

• 说明：创建验证器，验证器是整个验证框架的核心，所有验证工作均由提供
• 参数：[conditons]条件对象
• 返回：[validator]验证器

ValidateComponent = createValidateComponent(validator)(Component)

• 说明：创建验证组件
• 参数：[validator]验证器，[Component]需要被验证的组件
• 返回：返回一个新的Component

ValidateForm = createValidateForm(condition)(Form)

• 说明：创建验证表单
• 参数：[conditons]条件对象，[Form]需要被验证的表单
• 返回：返回一个新的Component

创建验证表单

import * as React from 'react'
import { createValidateForm, TestConstant, TriggerConstant } from 'src/core'
import { IValidateFormProps } from 'src/interface'
import Input from './input'
const conditions = {
    vid: {
        trigger: [TriggerConstant.CHANGE, TriggerConstant.BLUR]
        rules: [{ test: TestConstant.REQUIRED, message: 'vid不能为空' }]
    }
}
class ResultForm extends React.Component<any, any> {
    state = { vid: '' }
    change(key, e) {
        let state = {}
        state[key] = e.target.value
        this.setState(state)
    }
    render() {
        // 在被包裹的表单组件里面可以通过this.props获取validator
        let { validator } = this.props
        return (
            <div className="result-form">
                <Input vid="id" condition="vid" value={this.state.vid} onChange={this.change.bind(this, 'vid')}
            </div>
        )
    }
}
export default createValidateForm(conditions)(ResultForm)

创建验证组件

import * as React from 'react'
import { createValidateComponent } from 'src/core'
class InputComponent extends React.Component<any, undefined> {
    render() {
        let props = this.props
        return (
            <div className="input">
                <input {...props} />
            </div>
        )
    }
}
export default createValidateComponent()(InputComponent)

ValidateComponent 验证组件

• [props.vid] 组件ID，用于使用validator的接口
• [props.condition] 条件名称，指向验证规则对象的key
• [props.value] 组件值，所有验证的值都来源这个属性

常量

import { TestConstant, TriggerConstant } from 'ts-validator'

TestConstant 指定需要验证规则

• [TestConstant.REQUIRED] 必填
• [TestConstant.NUMBER] 数字
• [TestConstant.REG] 正则
• [TestConstant.EMAIL] 邮箱
• [TestConstant.URL] 网址
• [TestConstant.PHONE] 手机
• [TestConstant.IDCARD] 身份证
• [TestConstant.IP] ip
• [TestConstant.LENGTH] 长度
• [TestConstant.RANGE] 范围
• [TestConstant.DATE] 日期
• [TestConstant.REPEAT] 重复
• [TestConstant.CALLBACK] 回调

TriggerConstant 触发时机

• [TriggerConstant.BLUR] 失焦
• [TriggerConstant.FOCUS] 聚焦
• [TriggerConstant.CHANGE] 变化

验证规则

规则模型

{
    [key]: {
        trigger: [string|array]
        rules: [
            {
                test: [TestConstant]
                message: [straing]
                express?: [any]
            }
        ]
    }
}

验证规则必须是一个对象，对象的key是用来关联验证主机的condition属性，key对应的value也是一个对象，里面有trigger和rules两个属性，trigger是触发条件，可以是string，也可以是array，取值来自TriggerConstant。rules是验证规则，可以存放多条验证规则，每条验证有test、message、express三个属性，test指明验证类型，值来源于TestConstant，message是验证后错误提示信息，而expres是表达式，目前只有REG,RANGE,REPEAT,CALLBACK需要使用。

express指定内容

• [REG] 正则对象
• [RANGE] {max: [number], min:[number]}, max和min可以单独出现
• [REPEAT] 自定义分组名，重复验证每次验证同组组件
• [callback] 回调函数，可以返回boolean和promise对象，异步验证时只回调最后一次输入的结果，除非返回速度快于输入速度

Validator 验证器

validator.all()

• [说明] 手动验证整个表单下的验证组件
• [输入] 无
• [输出] boolean 全部正确为true，否则为false

validator.get(data?: string | Array)

• [说明] 获取验证结果，通过为true
• [输入] data: 可以不传递，或者传递一个vid，或者vid的集合
• [输出] undefined 单个传入时，没有找到对应验证组件
• [输出] object 单个传入时，返回验证数据对象
• [输出] array 多个验证或者不传值时，返回验证数据对象集合

validator.setResult(data: object | Array)

• [说明] 手动设置自定义验证结果
• [输入] data: 对象或者对象数组，对象结果{vid:string, error:boolean, message:string}
• [输出] 无

validator.specifyValidate(data)

• [说明] 指定验证
• [输入] data 验证数据是对象或者数组，数据包含vid和value
• [输出] undefined 单个传入时，没有找到对应验证组件
• [输出] object 单个传入时，返回验证数据对象
• [输出] array 多个验证或者不传值时，返回验证数据对象集合

validator.specifyReset(data: string | Array)

• [说明] 指定重置
• [输入] data 数据可以是单个vid或者vid数组
• [输出] undefined 单个传入时，没有找到对应验证组件
• [输出] object 单个传入时，返回验证数据对象
• [输出] array 多个验证或者不传值时，返回验证数据对象集合

validator.ignore(data: string | Array)

• [说明] 设置全局验证时忽略数据，一般在all()和get()的时候使用，每次添加都是增量，由于没有提供删除接口，慎用
• [输入] data vid，可为数组
• [输出] 无