antd formItem 表单验证

单行展示两个字段，都需要必填验证，formItem一个label对一个字段，默认的排版不足以满足需求，经过思考，稍加变通一下，实现效果如下：

<a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="formItemLayout">
   <a-form-model-item label="集装箱号段" prop="code">
     <a-row>
       <a-col :span="10">
         <a-form-model-item prop="codeStart" style="margin-bottom: 0 !important">
           <a-input v-model="ruleForm.codeStart" autocomplete="off" placeholder="请输入开始号段" />
         </a-form-model-item>
       </a-col>
       <a-col :span="4"><span class="item-node-line"></span></a-col>
       <a-col :span="10">
         <a-form-model-item prop="codeEnd" style="margin-bottom: 0 !important">
           <a-input v-model="ruleForm.codeEnd" autocomplete="off" placeholder="请输入结束号段" />
         </a-form-model-item>
       </a-col>
     </a-row>
   </a-form-model-item>
   <a-form-model-item label="集装箱自重（KG)" prop="weight">
     <a-input v-model="ruleForm.weight" autocomplete="off" placeholder="请输入集装箱自重(KG)" />
   </a-form-model-item>
 </a-form-model>

利用a-row a-col将字段在一行展示，codeStart codeEnd自定义校验。

data() {
    const validateCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('4位字母+6位数字'))
      } else {
        const reg = /^[0](\.\d+)$|^[1-9]*(\.\d+)?$/g
        if (!reg.test(value)) {
          return callback(new Error('4位字母+6位数字'))
        }
        callback()
      }
    }
    const validateWeight = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('此项为必填项'))
      } else {
        const reg = /^[0](\.\d+)$|^[1-9]*(\.\d+)?$/g
        if (!reg.test(value)) {
          return callback(new Error('请输入大于0的数字'))
        }
        callback()
      }
    }
    return {
      ruleForm: {
        code: 'code', // 占位用的 无实际用处，只为在"集装箱号段"前面加必填标识红色的星号
        codeStart: '',
        codeEnd: '',
        weight: ''
      },
      rules: {
        code: [{ required: true, trigger: 'change' }],
        codeStart: [{ validator: validateCode, trigger: 'blur' }],
        codeEnd: [{ validator: validateCode, trigger: 'blur' }],
        weight: [{ required: true, validator: validateWeight, trigger: 'blur'      		}]
      },
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 }
      }
    }
  }

以上总结是写给别人更是写给自己，如有不对的地方或者更好的方法，欢迎留言交流，在探索的路上与君共勉！