【vue3】for循环多选框勾选必填校验

最新推荐文章于 2024-07-05 14:35:11 发布

-草莓星球杯

最新推荐文章于 2024-07-05 14:35:11 发布

阅读量279

点赞数 3

分类专栏： ElementPlus 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_33225414/article/details/139835119

版权

ElementPlus 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

业务场景：

多选项必选一个，选了的输入框必填

    <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="捆绑终端硬件标识" prop="terminalCodeList">
              <el-checkbox-group
                v-model="form.terminalCodeList"
                style="display: flex; flex-direction: column"
              >
                <el-row
                  :gutter="20"
                  style="margin-top: 20px"
                  v-for="item in terminalList"
                >
                  <el-col :span="24">
                    <el-checkbox :label="item.value" :key="item.value">
                      <el-form-item
                        label-width="80px"
                        :label="item.label"
                        :prop="item.value"
                      >
                        <el-input
                          style="width: 200px"
                          v-model="form[item.value]"
                          :placeholder="`请输入` + item.label"
                        />
                      </el-form-item>
                    </el-checkbox>
                  </el-col>
                </el-row>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>

  let terminalList = $ref([
    {
      label: '机顶盒mac',
      value: 'mac',
    },
    {
      label: '机顶盒stbId',
      value: 'stbId',
    },
    {
      label: '电视账号',
      value: 'tVAccount',
    },
    {
      label: '手机号码',
      value: 'mobileNum',
    },
    {
      label: '网关mac',
      value: 'wMac',
    },
    {
      label: '授权码',
      value: 'liscense',
    },
    {
      label: '网关stbId',
      value: 'wStbId',
    },
  ])
  let getMacValidator = (rule, value, callback) => {
    if (
      dialogOperateType == 'update' &&
      form.terminalCodeList.some((item) => item == 'mac') &&
      value == ''
    ) {
      callback(new Error('请输入机顶盒mac'))
    } else {
      callback()
    }
  }
  let getStbIdValidator = (rule, value, callback) => {
    if (
      dialogOperateType == 'update' &&
      form.terminalCodeList.some((item) => item == 'stbId') &&
      value == ''
    ) {
      callback(new Error('请输入机顶盒stbId'))
    } else {
      callback()
    }
  }
  let gettVAccountValidator = (rule, value, callback) => {
    if (
      dialogOperateType == 'update' &&
      form.terminalCodeList.some((item) => item == 'tVAccount') &&
      value == ''
    ) {
      callback(new Error('请输入电视账号'))
    } else {
      callback()
    }
  }
  let getMobileNumValidator = (rule, value, callback) => {
    if (
      dialogOperateType == 'update' &&
      form.terminalCodeList.some((item) => item == 'mobileNum') &&
      value == ''
    ) {
      callback(new Error('请输入手机号码'))
    } else {
      callback()
    }
  }
  let getwMacValidator = (rule, value, callback) => {
    if (
      dialogOperateType == 'update' &&
      form.terminalCodeList.some((item) => item == 'wMac') &&
      value == ''
    ) {
      callback(new Error('请输入网关mac'))
    } else {
      callback()
    }
  }
  let getwStbIdValidator = (rule, value, callback) => {
    if (
      dialogOperateType == 'update' &&
      form.terminalCodeList.some((item) => item == 'wStbId') &&
      value == ''
    ) {
      callback(new Error('请输入网关stbId'))
    } else {
      callback()
    }
  }
  let getLiscenseValidator = (rule, value, callback) => {
    if (
      dialogOperateType == 'update' &&
      form.terminalCodeList.some((item) => item == 'liscense') &&
      value == ''
    ) {
      callback(new Error('请输入授权码'))
    } else {
      callback()
    }
  }
  let getCodeListValidator = (rule, value, callback) => {
    if (value.length == 0) {
      callback(new Error('至少选择一个捆绑终端硬件标识'))
    } else {
      callback()
    }
  }
 let rules = $ref({
    terminalCodeList: [
      {
        required: true,
        validator: getCodeListValidator,
        trigger: 'blur',
      },
    ],
    vendorCode: [{ required: true, validator: getValidator, trigger: 'blur' }],
    serviceCode: [{ required: true, validator: getValidator, trigger: 'blur' }],
    mac: [{ validator: getMacValidator, trigger: 'blur' }],
    stbId: [{ validator: getStbIdValidator, trigger: 'blur' }],
    tVAccount: [{ validator: gettVAccountValidator, trigger: 'blur' }],
    mobileNum: [{ validator: getMobileNumValidator, trigger: 'blur' }],
    wMac: [{ validator: getwMacValidator, trigger: 'blur' }],
    wStbId: [{ validator: getwStbIdValidator, trigger: 'blur' }],
    liscense: [{ validator: getLiscenseValidator, trigger: 'blur' }],
    
  })