表单复杂校验规则实现对比——vue(element) VS react(antd)

注：本文的demo实现都是用了笔者自己搭建的vue、react的初始化demo项目，方便平时做实现，写demo用。每次都要从0搭建实在是太恶心了，如果大家也用得上，直接clone走。

react-demo([email protected] + [email protected] + [email protected] + [email protected])

vue-demo([email protected] + [email protected] + [email protected] + [email protected])

表单复杂校验规则的一个demo说明

姓名：

1. 必填
2. 最多5个字符
3. 不能与【父亲姓名】一致

昵称：

1. 必填
2. 最多3个字符
3. 【姓名】修改会触发此字段修改，截取【姓名】的前三个字符
4. 可自己修改

父亲姓名：

1. 必填
2. 最多5个字符
3. 不能与【姓名】一致

vue（ElementUI）实现：

注：element的官方文档推荐了async-validator作为rules规则的文档参考，笔者还没有详细研究，猜测element用了此库。另外antd的验证规则格式也是这个样子的，所以也有用了这个库的可能。想要自己实现一套form校验规则的同学，可以研究一下。

react（antd）实现：

import React, { Component } from 'react';
import { Form, Input, Button } from 'antd';
import './style.less';

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8 },
};
const formTailLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8, offset: 4 },
};

class FormValidate extends Component {
  changeName(value) {
    this.props.form.setFieldsValue({ nick: value.substring(0, 3) });
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      

        
实现表单的关联校验
        

          
            {getFieldDecorator('name', {
              rules: [
                { required: true, message: '请输入内容', trigger: 'change' },
                { max: 5, message: '最多5个字符', trigger: 'change' },
                {
                  validator: (rule, value, callback) => { // ======划重点======
                    const form = this.props.form;
                    if (value && value === form.getFieldValue('father')) {
                      callback('不能与父亲姓名一致');
                    } else {
                      callback();
                    }
                  }, trigger: 'change'
                },
              ],
            })( this.changeName(e.target.value)} />)}
          
          
            {getFieldDecorator('nick', {
              rules: [
                { required: true, message: '请输入内容', trigger: 'change' },
                { max: 3, message: '最多3个字符', trigger: 'change' },
              ],
            })()}
          
          
            {getFieldDecorator('father', {
              rules: [
                { required: true, message: '请输入内容', trigger: 'change' },
                { max: 5, message: '最多5个字符', trigger: 'change' },
                {
                  validator: (rule, value, callback) => { // ======划重点======
                    const form = this.props.form;
                    if (value && value === form.getFieldValue('name')) {
                      callback('不能与姓名一致');
                    } else {
                      callback();
                    }
                  }, trigger: 'change'
                },
              ],
            })()}
          
          
            提交
          
        
      
    );
  }
}

export default Form.create()(FormValidate);