el-form校验绑定非表单内容

需求：给表单加个必填
问题：本地绑定的是自定义的字段

一般表单校验：

<template>
  <el-form :model="form" label-width="auto" style="max-width: 600px">
    <el-form-item label="Activity name">
//一般这边都是 v-model=form.xxx 好让rules能匹配上对应的字段
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="Activity zone">
//v-model="region"  如果是自定义的绑定，这边需求是必填，这个就要分情况讨论
      <el-select v-model="region" placeholder="please select your zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
   </el-form>
</template>

自定义的是 ：

页面 
<el-form-item label="Activity type">
      <el-checkbox-group v-model="sellMethod">
        <el-checkbox value="Online activities" name="type">
          Online activities
        </el-checkbox>
        <el-checkbox value="Promotion activities" name="type">
          Promotion activities
        </el-checkbox>
        <el-checkbox value="Offline activities" name="type">
          Offline activities
        </el-checkbox>
        <el-checkbox value="Simple brand exposure" name="type">
          Simple brand exposure
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>

js 自定义的字段
const sellMethod = ref([]); 

解决方法：

第一种：改成form.xxx的形式，然后在底下的rules 增加必填

1.直接在表单上面加 :rules
 <el-form-item label="名称" prop="name" :rules="{
            required: true,
            message: '请输入xxx',
            trigger: 'blur',
          }">
 <el-input v-model="form.name" type="textarea" placeholder="请输入xxx" 
:show-word-limit="true" :rows="4" />
 </el-form-item>

2.在下面的js定义表单需要验证的 rules
const rules = reactive<FormRules<RuleForm>>({
  name: [
      { required: true, message: "请选择xxx", trigger: "change" },
    ],
}

缺点：这个字段如果有其他需要用的地方，改动太大，整体需求牵涉太多，容易出现修改不完全或者关联其他字段丢失的情况

优点：表单校验一步到位，不用考虑其他（建议用在设计页面初期）

第二种：自定义表头加*号必填显示，手动添加校验

 <el-form-item label="渠道" prop="name">
//自定义label
   <template #label>
     <span style="color:red">*</span>渠道
   </template>
      <el-checkbox-group v-model="sellMethod" true-label="0" false-label="1"  >
         <el-checkbox label="saleChannelStaff">员工端</el-checkbox>
         <el-checkbox label="saleChannelClient">客户端</el-checkbox>
       </el-checkbox-group>
 </el-form-item>


//提交校验
function submit() {
 if (sellMethod.value.length == 0 ) {
    return msgWarning('请选择渠道');
  }
}