//配合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>
    );
  }
}

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

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,
  }
  //...
});