vue表单vxe-form如何对一个规则同时多字段联动校验，对一个控件校验多个关联字段。正常的表单场景是一个控件一个字段，那么配置起来非常任意，一个字段对应一个校验规则。当时某些复杂场景就不一样了，比如用户控件，有id/code/role等。比如范围日期选择，一个控件是对应2个字段的，开始日期和结束日期。这个时候就可以使用 rule 规则中 to 属性来指定复杂的多字段校验。
https://vxetable.cn
表单-日期范围-多字段校验
举个例子，比如日期范围选择，有2个字段，先给控件绑定一个不存在的字段，然后在这个字段里面配置2条规则，分别校验多个字段；当某个字段为空时都能被直接校验并提示出来
<template><div><vxe-formv-bind="formOptions"v-on="formEvents"></vxe-form></div></template><scriptsetup>import{reactive}from'vue'import{VxeUI}from'vxe-pc-ui'constformOptions=reactive({titleWidth:120,data:{name:'test1',startDate:'',endDate:''},rules:{_startAndEnd:[{to:'startDate',required:true,message:'请选择开始时间'},{to:'endDate',required:true,message:'请选择结束时间'}]},items:[{field:'name',title:'名称',span:24,itemRender:{name:'VxeInput'}},{field:'_startAndEnd',title:'2个字段格式',span:24,itemRender:{name:'VxeDateRangePicker',startField:'startDate',endField:'endDate'}},{align:'center',span:24,itemRender:{name:'VxeButtonGroup',options:[{type:'submit',content:'提交',status:'primary'},{type:'reset',content:'重置'}]}}]})constformEvents={submit(){VxeUI.modal.message({content:'保存成功',status:'success'})},reset(){VxeUI.modal.message({content:'重置事件',status:'info'})}}</script>表格-日期范围-多字段校验
同样先给控件绑定一个不存在的字段，然后在这个字段里面配置2条规则，分别校验多个字段
<template><div><vxe-button@click="fullValidEvent">校验全量数据</vxe-button><vxe-gridref="gridRef"v-bind="gridOptions"></vxe-grid></div></template><scriptsetup>import{ref,reactive}from'vue'import{VxeUI}from'vxe-table'constgridRef=ref()constgridOptions=reactive({border:true,showOverflow:true,keepSource:true,height:300,editConfig:{trigger:'click',mode:'row',showStatus:true},editRules:{_startAndEnd:[{to:'startDate',required:true,message:'请选择开始时间'},{to:'endDate',required:true,message:'请选择结束时间'}]},columns:[{type:'checkbox',width:60},{type:'seq',width:70},{field:'name',title:'Name',editRender:{name:'VxeInput'}},{field:'_startAndEnd',title:'多字段校验',editRender:{name:'VxeDateRangePicker',startField:'startDate',endField:'endDate'}},{field:'sex',title:'Sex',editRender:{name:'VxeInput'}},{field:'age',title:'Age',editRender:{name:'VxeInput'}},{field:'date',title:'Date',editRender:{name:'VxeInput'}}],data:[{id:10001,name:'Test1',startDate:'',endDate:'',sex:'0',age:28,address:'test abc'},{id:10002,name:'',startDate:'2026-03-01',endDate:'2026-04-01',sex:'1',age:22,address:'Guangzhou'},{id:10003,name:'Test3',startDate:'',endDate:'',sex:'',age:32,address:'Shanghai'},{id:10004,name:'Test4',startDate:'2026-01-01',endDate:'2026-01-10',sex:'',age:23,address:'test abc'},{id:10005,name:'',startDate:'2026-08-14',endDate:'2026-08-26',sex:'1',age:30,address:'Shanghai'},{id:10006,name:'Test6',startDate:'2026-10-10',endDate:'026-12-10',sex:'1',age:21,address:'test abc'}]})constfullValidEvent=async()=>{const$grid=gridRef.valueif($grid){consterrMap=await$grid.validate(true)if(errMap){VxeUI.modal.message({status:'error',content:'校验不通过！'})}else{VxeUI.modal.message({status:'success',content:'校验成功！'})}}}</script>https://gitee.com/x-extends/vxe-table
