VUE3 v-show 引起的表单验证问题

原创已于 2022-09-07 10:21:45 修改 · 859 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

于 2022-09-03 15:34:17 首次发布

VUE 专栏收录该内容

31 篇文章

订阅专栏

<el-form ref="formRef" :rules="rules" :model="form" label-width="80px">

    <el-form-item label="任务类型" prop="TaskType">
        <el-radio-group v-model="form.TaskType" @change="handleChangeTaskType($event)">
              <el-radio :label="1">1</el-radio>
              <el-radio :label="2">2</el-radio>
              <el-radio :label="3">3</el-radio>
        </el-radio-group>
    </el-form-item>

    <el-form-item label="类型1要求输入内容" v-show="form.TaskType === 1" prop="TaskAttendResources">
            <!-类型1要求输入内容-->
    </el-form-item>

    <el-form-item label="类型2要求输入内容" v-show="form.TaskType === 2" prop="TaskAttendProblems">
            <!-类型2要求输入内容-->
    </el-form-item>

    <el-form-item label="类型3要求输入内容" v-show="form.TaskType === 3" prop="TaskContent">
        <QuillEditor ref="ref_QE_Content" theme="snow" :toolbar="toolbarOptions" contentType="html" enable v-model:content="form.TaskContent" placeholder="输入任务内容……" 
              @blur="onEditorBlur($event, 'TaskContent')" 
              @focus="onEditorFocus($event)"                 
              @ready="onEditorReady($event)" 
              @textChange="onTextChange($event, 'TaskContent')"
              @update:content="onContentChange($event, 'TaskContent')"
        />
    </el-form-item>

    <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="onReset">取消</el-button>
    </el-form-item>

</el-form>

如上：有一个表单，要求用户在选择“任务类型3”时，必须“TaskContent”的内容，选择类型1或类型2时则不做验证要求。

<script setup name="addtask">
    
    const form = reactive({  
      TaskType: 1,   
      TaskContent: ""   
    });
    
    const rules = {
      TaskContent: [
        { required: true, message: "请输入任务内容", trigger: ['blur', 'change'] }
      ]
    };

</script>

上述验证代码，会发现有问题，如果用户选择或者切换到了“类型1”或者“类型2”，同样会对类型3下的TaskContent进行验证，提示用户“请输入任务内容”

解决方法：有人提出了把v-show 也成v-if，表单验证好像没问题了，但是程序如果进行了对TaskContent进行了其它操作，会引起不必要的错误。

最终解决方法：自定义验证规则

<script setup name="addtask">
    
    const form = reactive({  
      TaskType: 1,   
      TaskContent: ""   
    });
    
    const rules = {
      TaskContent: [
        {
          required: true,
          // message: "请输入任务内容",
          // 自定义验证，当选择类型3时，才进行TaskContent验证Value是否为空
          validator: (rule, value, callback) => {          
              const checkValue = quill_content.getText().replace(/^\s+/g, '') != ''
              if (form.TaskType === 3 && !checkValue) {
                  callback(new Error('请输入任务内容'));
              }
              else {
                  callback();
              }
          },
          trigger: ['blur', 'change']
        },
      ],
    };

</script>