smart-validate

简单快捷的数据建模及数据验证工具，可以配合redux-form、formik等完成快速表单验证

开始

npm install --save smart-validate

基础使用

//配合redux-form
import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import Validate from 'smart-validate';

const syncValidate = new Validate({
  userphone: {
    rule: 'phone',
    errorTip: '手机号格式有误',
    nullTip: '手机号不能为空',
  },
  userpwd: {
    nullTip: '密码不能为空',
  },
});
@reduxForm({
  form: 'login',
  validate: syncValidate.validator,
})
export default class Form extends Component {
  submitForm = values => {
    if (syncValidate.valid) {
      //... 提交
    } else {
      console.log(syncValidate.error);
      //... 错误处理
    }
  };
  render() {
    const { handleSubmit } = this.props;
    return (
      <form>
        <label>
          <span>用户名:</span>
          <Field
            component="input"
            type="tel"
            name="userphone"
            placeholder="请输入手机号"
            maxLength={11}
          />
        </label>
        <label>
          <span>密码:</span>
          <Field component="input" type="password" name="userpwd" placeholder="请输入密码" />
        </label>
        <button onClick={handleSubmit(this.submitForm)}>登录</button>
      </form>
    );
  }
}

API

const syncValidate = new Validate (scheme)

接收验证计划并创建验证，返回一个实例对象

参数 scheme

scheme 为一个key:value组合的对象，key为需要验证的字段名，value包含以下 4 种属性:

• rule: 字段值的验证规则
• errorTip: 自定义的错误提示 默认值为 请填写正确信息
• nullTip: 自定义的为空提示 默认值为 数据不能为空
• required: 是否为必填项 默认值为 true 当required为false时，验证方法将会在此项字段的值不为空的情况下才会去验证，为空将会忽略验证

示例：

const { validator } = new Validate({
  username:{
    rule:'email',
    errorTip:'用户名格式必须为邮箱',
    nullTip:'请输入用户名'
  }
  password:{
    nullTip:'请输入密码'
  }
});
const error = validator({
  name: 'a@baskdjf',
});
console.log(error);

// 返回结果如下
// { username: '用户名格式必须为邮箱',password: '请输入密码'}

更多示例请参考:test/index.test.js

rule

rule 为对应字段需要验证的规则，可以包含以下几种类型：

| 类型 | 描述 | | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | String | String 值为默认规则集或是在 rules 里面传入的自定义规则集的 key 值（参照 默认规则） | | RegExp | 将会根据传入的正则表达式去验证对应的字段值 | | Function | 自定义的方法将被传入 3 个参数:(value,values,key)，value为当前验证的字段值，values为所有字段的键值对，key为当前验证字段的 key 值。会根据验证方法的返回值去判断此验证是否通过，当返回值仅为true时，验证通过，其它类型，验证失败。当返回值的类型为string时将被用作为错误提示 | | Array | 接收一组验证规则，数组中的每一项可以是以上 3 种类型之一。内部验证方法将会依次调用数组当中每一项的验证规则，当且仅当前一项验证规则通过时，才会去验证后续规则。 |

只要是在scheme定义过的字段，默认内部验证方法都会去验证字段的值是否=== undefined,当且仅当字段的值不等于undefined时，内部验证方法才会去验证对应在scheme中定义的规则。

示例:

const syncValidate = new Validate({
  username:{
    rule:'email',
    errorTip:'用户名格式必须为邮箱',
    nullTip:'请输入用户名'
  },
  age:{
    rule:/^([1-9]+[0-9]?){1,2}$/,
    errorTip:'年龄有误',
    required:false
  }
  password:{
    rule:({ length }) => {
      if (length >= 6 && length <= 20) {
        return true;
      }
      return '密码长度必须大于等于6，小于等于20';
    },
    nullTip:'请输入密码'
  },
  repassword:{
    rule:(value, values) => {
      if (value === values['password']) {
        return true;
      }
      return '两次密码不一致';
    },
    nullTip:'请输入确认密码'
  },
  bio:{
    rule:['string',({ length }) => {
      if (length <= 20) {
        return true;
      }
      return false;
    }],
    errorTip:'请输入20个字符以内的字符串',
    required:false,
  }
  //...
});

Validate.ruleType

为了方便快速创建验证，默认内置了部分验证规则、错误提示和为空提示。详见Validate.ruleType

默认规则包含如下:

| 规则 | 说明 | | -------- | ---------------------------------------------------------------------------- | | number | 数字类型包含正数、负数、整数、小数 | | email | 电子邮箱格式 | | url | 验证值是否为网址 | | name | 中文姓名格式，包含少数名族姓名中间的 · | | phone | 为1开头的手机号（注：号段变化太快这里仅校验是否为 1 开头的 11 位手机号） | | bank | 验证是否为银行卡号（注：仅校验位数） | | string | 不包含特殊字符 | | postcode | 邮箱格式 | | password | 验证密码长度为6-12位，由数字、小写字符和大写字母组成，但必须至少包括2种字符 | | idcard | 身份证号 |

Validate.addRule(ruleObj)

当默认内置规则不满足实际项目需要时，可以使用 Validate.addRule 进行扩展，参数ruleObj为对应扩展的规则名和具体规则的键值对，无法覆盖内置的 Validate.ruleType

Instance API

实例对象包含以下属性和方法

scheme : Object

对象的验证计划，默认为创建对象时传入的 scheme 对象，可以修改，内部验证器每次验证将依据当下最新的 scheme 进行校验 详细参数参考

error : Object

错误对象，默认为{},当验证不通过时为对应的字段和错误提示组成的键值对，验证通过为{}

validator(values) : Object

验证器，接收待验证的对象 例如{ field1: 'value1', field2: 'value2' }，并依据 scheme进行校验，并返回校验的错误对象

valid : boolean

对验证结果的一次标志，true为验证通过，false为验证不通过，初始为false。可依据此熟悉判断一次验证的结果

tip : string

验证提示，如果验证未通过，默认值为第一个字段的提示信息,便于移动端 Toast 验证交互方案

pristine : boolean

初始标志，为true表示scheme从未验证过，即从未调用validator方法