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


    整体进行验证

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

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

    以下是一个示例:

    ```vue

    1. <script>
    2. export default {
    3.   data() {
    4.     return {
    5.       addform: {
    6.         isCheck1: false,
    7.         isCheck2: false
    8.       },
    9.       rules: {
    10.         signType: [
    11.           { validator: this.validateSignType, trigger: 'change' }
    12.         ]
    13.       }
    14.     };
    15.   },
    16.   methods: {
    17.     validateSignType(rule, value, callback) {
    18.       if (this.addform.isCheck1 || this.addform.isCheck2) {
    19.         callback();
    20.       } else {
    21.         callback(new Error('至少选择一个时间段'));
    22.       }
    23.     },
    24.     submitForm(formName) {
    25.       this.$refs[formName].validate((valid) => {
    26.         if (valid) {
    27.           alert('验证通过');
    28.         } else {
    29.           return false;
    30.         }
    31.       });
    32.     }
    33.   }
    34. };
    35. script>


    ```

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

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

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

    分别进行校验 

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

    假设有两个复选框 `` 分别为 `checkbox1` 和 `checkbox2`分别校验:

    以下是一个示例:

    ```vue

    1. <script>
    2. export default {
    3.   data() {
    4.     return {
    5.       form: {
    6.         checkbox1: false,
    7.         checkbox2: false
    8.       },
    9.       rules: {
    10.         checkbox1: [
    11.           { required: true, message: '至少选择一个', trigger: 'blur' },
    12.           { type: 'array', min: 1, message: '至少选择一个', trigger: 'change' }
    13.         ],
    14.         checkbox2: [
    15.           { required: true, message: '至少选择一个', trigger: 'blur' },
    16.           { type: 'array', min: 1, message: '至少选择一个', trigger: 'change' }
    17.         ]
    18.       }
    19.     };
    20.   },
    21.   methods: {
    22.     submitForm(formName) {
    23.       this.$refs[formName].validate((valid) => {
    24.         if (valid) {
    25.           alert('验证通过');
    26.         } else {
    27.           return false;
    28.         }
    29.       });
    30.     }
    31.   }
    32. };
    33. script>


    ```

    在上述示例中,我们使用了 Element UI 的 `` 和 `` 包裹了两个复选框,并通过 `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。

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

  • 相关阅读:
    redis实战-redis实现分布式锁&redisson快速入门
    中级深入--day17
    【漏洞分析】Reflection Token 反射型代币攻击事件通用分析思路
    小学生python游戏编程arcade----游戏界面按钮实现事件实现的三种方法
    bare Git 仓库是什么?
    Linux执行jps命令的时候报错:-bash: jps: command not found
    ORB-SLAM2 ---- Frame::UndistortKeyPoints函数
    大数据架构师——数据湖技术(二)
    程序流程控制
    STL好难(3):vector的使用
  • 原文地址:https://blog.csdn.net/qq_58647634/article/details/132817041