请问有个懂jeecg前端框架的吗,有个校验规则的问题想请教下,ai了半天都不行?

 <template #limit="{ model,field }">
          <a-radio-group v-model:value="model[field]">  
          <a-radio value="-1">无限制11</a-radio>
          <a-radio value="20">自定义</a-radio>
        </a-radio-group>
        <a-input-number v-model:value="model['pay']" v-if="model[field] == '20'" placeholder="请输入" addonAfter="元" :precision="2" style="width: 280px"></a-input-number>
      </template>
<script lang="ts" setup>
 {
      label: '收费上限',
      field: 'holdingCost5',
      component: 'Input',
      slot: 'limit', 
      ifShow:({model})=>{
        return model.type == '10'
      },
      dynamicRules: ({model,schema}) => {
        return [
          { required: true, message: '请选择收费上限'},
        ];
      },
      colProps: {
        span:12,
      },
       defaultValue:'-1',
    },
</script>

我想校验<a-input-number v-model:value="model['pay']" v-if="model[field] == '20'" placeholder="请输入" addonAfter="元" :precision="2" style="width: 280px"></a-input-number>
这个输入的值不能为空要怎么做?这个属于组件插槽,好像校验不到,ai了半天都不行

阅读 1.4k
1 个回答

解决方案:

  1. dynamicRules 中添加自定义校验器,这样可以在表单提交时进行校验
  2. 在模板中添加手动校验逻辑,提供实时的用户反馈

具体实现:

<template #limit="{ model, field }">
  <a-radio-group v-model:value="model[field]">  
    <a-radio value="-1">无限制</a-radio>
    <a-radio value="20">自定义</a-radio>
  </a-radio-group>
  <a-input-number 
    v-model:value="model['pay']" 
    v-if="model[field] == '20'" 
    placeholder="请输入" 
    addonAfter="元" 
    :precision="2" 
    style="width: 280px"
    @change="handlePayChange"
  ></a-input-number>
</template>

{
  label: '收费上限',
  field: 'holdingCost5',
  component: 'Input',
  slot: 'limit', 
  ifShow: ({ model }) => {
    return model.type == '10'
  },
  dynamicRules: ({ model, schema }) => {
    return [
      { 
        required: true, 
        message: '请选择收费上限'
      },
      {
        validator: (rule, value) => {
          if (value == '20' && (!model.pay || model.pay <= 0)) {
            return Promise.reject('请输入有效的收费金额');
          }
          return Promise.resolve();
        },
        trigger: ['change', 'blur']
      }
    ];
  },
  colProps: {
    span: 12,
  },
  defaultValue: '-1',
}
推荐问题