element-ui表单校验实现单个自定义校验

<el-form-item

            :label-width="labelWidth"

            label="服务方式："

            prop="service_type"

            :rules="editFormRules.service_type"

          >

            <el-radio-group v-model="editForm.service_type">

              <el-radio

                v-for="(item, index) in serviceMethodData"

                :key="index + item.id"

                :label="item.value"

              >{{ item.name }}</el-radio>

            </el-radio-group>

</el-form-item>

​

​

// 设置单选框自定义校验规则

const validateSingleBox = (rule, value, callback) =>{

  if (['', 'undefined', 'null', '0', 0].includes(value)) {

    return callback(new Error('请选择单选框内容'))

  } else {

    callback()

  }

}

​

​

// data设置数据

  data() {

    return {

      editForm: {

        service_type: '' // 服务方式

      },

      serviceMethodData: [], // 服务方式数据

      editFormRules: {

        service_type: [

          { required: true, validator: validateSingleBox, trigger: 'change' }

        ] // 服务方式校验

      }

    }

  },