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


    业务场景:

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

    1. "20">
    2. <el-col :span="12">
    3. <el-form-item label="捆绑终端硬件标识" prop="terminalCodeList">
    4. <el-checkbox-group
    5. v-model="form.terminalCodeList"
    6. style="display: flex; flex-direction: column"
    7. >
    8. <el-row
    9. :gutter="20"
    10. style="margin-top: 20px"
    11. v-for="item in terminalList"
    12. >
    13. <el-col :span="24">
    14. <el-checkbox :label="item.value" :key="item.value">
    15. <el-form-item
    16. label-width="80px"
    17. :label="item.label"
    18. :prop="item.value"
    19. >
    20. <el-input
    21. style="width: 200px"
    22. v-model="form[item.value]"
    23. :placeholder="`请输入` + item.label"
    24. />
    25. el-form-item>
    26. el-checkbox>
    27. el-col>
    28. el-row>
    29. el-checkbox-group>
    30. el-form-item>
    31. el-col>
    1. let terminalList = $ref([
    2. {
    3. label: '机顶盒mac',
    4. value: 'mac',
    5. },
    6. {
    7. label: '机顶盒stbId',
    8. value: 'stbId',
    9. },
    10. {
    11. label: '电视账号',
    12. value: 'tVAccount',
    13. },
    14. {
    15. label: '手机号码',
    16. value: 'mobileNum',
    17. },
    18. {
    19. label: '网关mac',
    20. value: 'wMac',
    21. },
    22. {
    23. label: '授权码',
    24. value: 'liscense',
    25. },
    26. {
    27. label: '网关stbId',
    28. value: 'wStbId',
    29. },
    30. ])
    31. let getMacValidator = (rule, value, callback) => {
    32. if (
    33. dialogOperateType == 'update' &&
    34. form.terminalCodeList.some((item) => item == 'mac') &&
    35. value == ''
    36. ) {
    37. callback(new Error('请输入机顶盒mac'))
    38. } else {
    39. callback()
    40. }
    41. }
    42. let getStbIdValidator = (rule, value, callback) => {
    43. if (
    44. dialogOperateType == 'update' &&
    45. form.terminalCodeList.some((item) => item == 'stbId') &&
    46. value == ''
    47. ) {
    48. callback(new Error('请输入机顶盒stbId'))
    49. } else {
    50. callback()
    51. }
    52. }
    53. let gettVAccountValidator = (rule, value, callback) => {
    54. if (
    55. dialogOperateType == 'update' &&
    56. form.terminalCodeList.some((item) => item == 'tVAccount') &&
    57. value == ''
    58. ) {
    59. callback(new Error('请输入电视账号'))
    60. } else {
    61. callback()
    62. }
    63. }
    64. let getMobileNumValidator = (rule, value, callback) => {
    65. if (
    66. dialogOperateType == 'update' &&
    67. form.terminalCodeList.some((item) => item == 'mobileNum') &&
    68. value == ''
    69. ) {
    70. callback(new Error('请输入手机号码'))
    71. } else {
    72. callback()
    73. }
    74. }
    75. let getwMacValidator = (rule, value, callback) => {
    76. if (
    77. dialogOperateType == 'update' &&
    78. form.terminalCodeList.some((item) => item == 'wMac') &&
    79. value == ''
    80. ) {
    81. callback(new Error('请输入网关mac'))
    82. } else {
    83. callback()
    84. }
    85. }
    86. let getwStbIdValidator = (rule, value, callback) => {
    87. if (
    88. dialogOperateType == 'update' &&
    89. form.terminalCodeList.some((item) => item == 'wStbId') &&
    90. value == ''
    91. ) {
    92. callback(new Error('请输入网关stbId'))
    93. } else {
    94. callback()
    95. }
    96. }
    97. let getLiscenseValidator = (rule, value, callback) => {
    98. if (
    99. dialogOperateType == 'update' &&
    100. form.terminalCodeList.some((item) => item == 'liscense') &&
    101. value == ''
    102. ) {
    103. callback(new Error('请输入授权码'))
    104. } else {
    105. callback()
    106. }
    107. }
    108. let getCodeListValidator = (rule, value, callback) => {
    109. if (value.length == 0) {
    110. callback(new Error('至少选择一个捆绑终端硬件标识'))
    111. } else {
    112. callback()
    113. }
    114. }
    115. let rules = $ref({
    116. terminalCodeList: [
    117. {
    118. required: true,
    119. validator: getCodeListValidator,
    120. trigger: 'blur',
    121. },
    122. ],
    123. vendorCode: [{ required: true, validator: getValidator, trigger: 'blur' }],
    124. serviceCode: [{ required: true, validator: getValidator, trigger: 'blur' }],
    125. mac: [{ validator: getMacValidator, trigger: 'blur' }],
    126. stbId: [{ validator: getStbIdValidator, trigger: 'blur' }],
    127. tVAccount: [{ validator: gettVAccountValidator, trigger: 'blur' }],
    128. mobileNum: [{ validator: getMobileNumValidator, trigger: 'blur' }],
    129. wMac: [{ validator: getwMacValidator, trigger: 'blur' }],
    130. wStbId: [{ validator: getwStbIdValidator, trigger: 'blur' }],
    131. liscense: [{ validator: getLiscenseValidator, trigger: 'blur' }],
    132. })

  • 相关阅读:
    Android BLE 蓝牙开发——扫码枪基于BLESSED
    软件产品测试的准入准出标准有哪些?
    Java开发学习(四十一)----MyBatisPlus标准数据层(增删查改分页)开发
    车间作业分析重点分析的内容是哪些?
    python5day
    asp.net课程设计司库管理系统-金融理财管理系统
    spring cloud 全家桶 简单介绍
    element plus tree树形复选框
    搞定ESD(二):ESD干扰机理分析
    android翻转效果时钟
  • 原文地址:https://blog.csdn.net/qq_33225414/article/details/139835119