找回密码
 立即注册
首页 资源区 代码 vue表单vxe-form如何多字段联动校验,对一个控件校验多 ...

vue表单vxe-form如何多字段联动校验,对一个控件校验多个关联字段

梨恐 5 天前
vue表单vxe-form如何多字段联动校验,对一个控件校验多个关联字段。正常的表单场景是一个控件一个字段,那么配置起来非常任意,一个字段对应一个校验规则。当时某些复杂场景就不一样了,比如用户控件,有id/code/role等。比如范围日期选择,一个控件是对应2个字段的,开始日期和结束日期。这个时候就可以使用 rule 规则中 field 属性来指定复杂的多字段校验。
https://vxetable.cn
表单-日期范围-多字段校验

举个例子,比如日期范围选择,有2个字段,先给控件绑定一个不存在的字段,然后在这个字段里面配置2条规则,分别校验多个字段;当某个字段为空时都能被直接校验并提示出来
1.png
  1. <template>
  2.   
  3.     <vxe-form v-bind="formOptions" v-on="formEvents" ></vxe-form>
  4.   
  5. </template>
复制代码
表格-日期范围-多字段校验

同样先给控件绑定一个不存在的字段,然后在这个字段里面配置2条规则,分别校验多个字段
2.png
  1. <template>
  2.   
  3.     <vxe-button @click="fullValidEvent">校验全量数据</vxe-button>
  4.     <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
  5.   
  6. </template>
复制代码
https://gitee.com/x-extends/vxe-table

来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

相关推荐

您需要登录后才可以回帖 登录 | 立即注册