element-ui在vue中如何实现校验两个复选框至少选择一个！

整体进行验证

想验证至少选择一个复选框，可以将这两个复选框视为一个整体进行验证。在 Element UI 中，可以使用自定义验证规则来实现这一点。

你可以在 `rules` 对象中定义一个自定义的验证规则来检查 `isCheck1` 和 `isCheck2` 至少有一个被选中。

以下是一个示例：

```vue
javascript 复制代码
<template>
  <el-form :model="addform" :rules="rules" ref="form" label-width="80px">
    <el-form-item label="出诊时间段" prop="signType">
      <div class="signCss">
        <el-checkbox label="上午" v-model="addform.isCheck1"></el-checkbox>
        <el-checkbox label="下午" v-model="addform.isCheck2"></el-checkbox>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('form')">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      addform: {
        isCheck1: false,
        isCheck2: false
      },
      rules: {
        signType: [
          { validator: this.validateSignType, trigger: 'change' }
        ]
      }
    };
  },
  methods: {
    validateSignType(rule, value, callback) {
      if (this.addform.isCheck1 || this.addform.isCheck2) {
        callback();
      } else {
        callback(new Error('至少选择一个时间段'));
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('验证通过');
        } else {
          return false;
        }
      });
    }
  }
};
</script>
```

在上述示例中，我们定义了 `validateSignType ` 方法作为自定义的验证函数 。在该函数中，我们检查 `isCheck1` 或者 `isCheck2` 是否至少有一个为 `true`，如果是，则调用 `callback()` 表示验证通过，否则调用 `callback(new Error('至少选择一个时间段'))` 表示验证失败。

然后在 `rules` 对象中，我们为 `signType` 定义了一个验证规则，使用了自定义的验证函数。

这样设置后，如果用户没有选择任何一个复选框，会显示错误提示信息，并阻止表单的提交。如果至少选择了一个复选框，表单将能够提交。

分别进行校验

Element UI 是一个基于 Vue.js 的 UI 组件库，用于构建 Web 应用程序的用户界面。要实现校验两个复选框至少选择一个，可以使用 Element UI 提供的表单验证功能。

假设有两个复选框 `<el-checkbox>` 分别为 `checkbox1` 和 `checkbox2`分别校验：

以下是一个示例：

```vue
javascript 复制代码
<template>
  <el-form :model="form" :rules="rules" ref="form" label-width="80px">
    <el-form-item label="复选框1" prop="checkbox1">
      <el-checkbox v-model="form.checkbox1">选项1</el-checkbox>
    </el-form-item>
    <el-form-item label="复选框2" prop="checkbox2">
      <el-checkbox v-model="form.checkbox2">选项2</el-checkbox>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('form')">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        checkbox1: false,
        checkbox2: false
      },
      rules: {
        checkbox1: [
          { required: true, message: '至少选择一个', trigger: 'blur' },
          { type: 'array', min: 1, message: '至少选择一个', trigger: 'change' }
        ],
        checkbox2: [
          { required: true, message: '至少选择一个', trigger: 'blur' },
          { type: 'array', min: 1, message: '至少选择一个', trigger: 'change' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('验证通过');
        } else {
          return false;
        }
      });
    }
  }
};
</script>
```

在上述示例中，我们使用了 Element UI 的 `<el-form>` 和 `<el-form-item>` 包裹了两个复选框，并通过 `v-model` 绑定了它们的值到 `form` 对象中的 `checkbox1` 和 `checkbox2`。

在 `data` 中我们定义了 `form` 对象，其中包含了两个复选框的值，并且定义了 `rules` 对象来进行验证。

在 `rules` 对象中，我们为 `checkbox1` 和 `checkbox2` 分别定义了两条验证规则。

第一条规则 `{ required: true, message: '至少选择一个', trigger: 'blur' }` 表示在失去焦点时进行验证，如果没有选择，则会显示错误信息 `'至少选择一个'`。

第二条规则 `{ type: 'array', min: 1, message: '至少选择一个', trigger: 'change' }` 表示在值改变时进行验证，要求至少选择一个。

在 `submitForm` 方法中，我们调用了 `$refs $formName$ .validate` 方法来进行表单验证，如果验证通过，则弹出一个提示框，否则返回 false。

通过这样的设置，当用户没有选择任何一个复选框时，会显示错误提示信息，并阻止表单的提交。