antd vue中formModal多个输入框一行显示及验证

antd vue中formModal多个输入框一行显示

antd vue中的formModal在制作表单的时候非常实用，但是实例一般都是一行一个控件展示，但是在实际的表单设计中也会遇到一行显示多个控件 ，且还需要进行验证的i情况

直接上代码
实际上就是在formModalItem里面再嵌套formModalItem 然后样式的设置inline-block必须加上

<a-form-model-item v-bind="formItemLayout" required label="深度">
    <a-form-model-item prop="start" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
      <a-input v-model="form.start" style="width: 100%"/>
    </a-form-model-item>
    <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">-</span>
    <a-form-model-item prop="end" :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
      <a-input v-model="form.end" prop="end" style="width: 100%"/>
    </a-form-model-item>
</a-form-model-item>

验证就直接在rules里面些即可

start: [{ validator: validateDep, required: true, trigger: 'change' }],
end: [{ validator: validateDep, required: true, trigger: 'change' }],

validatorDep的验证是自定义的，用来验证是否是整数。
最后显示出来的样式：

验证~~

实时验证实例

对于输入框的验证，一般对表单都是一次性提交的时候进行验证，但是不排除会有像用户注册的时候那样，输入用户名之后会又查重，这时候再ant vue中的实现如下

<a-form-model-item v-bind="formItemLayout"  label="昵称" prop="name" hasFeedback :validateStatus="validateStatus">
   <a-input v-model="form.name" />
</a-form-model-item>

首先在表单上添加上hasFeedback 和 validateStatus

data中对该控件进行验证

data(){
	let validateName = (rule, value, callback) => {
            if(!value){
                callback(new Error('请输入井名'))
            }else{
                
                this.validateStatus= 'validating';
                交互，看数据是不是重名。交互回来，井名没有重名this.validateStatus= 'success',重名就warning且callback(new Error('换一个名称把'))
                //这里用定时器模拟过程
                let id = setTimeout(()=>{
                    this.validateStatus= 'success';
                    callback();
                },3000)
            }
        }
        return {
            validateStatus:'',
            Rules: {
                name: [
                    {validator: validateName, required: true, trigger: 'blur'}
                ]
            },
		}
}

这样数据只要change就会触发validate检验，且根据检验规则进行不同状态的提示