<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>
