Ts-validator NPM

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 回调

验证规则

规则模型

{
    [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需要使用。