vue3实现el-form的自定义校验规则

最新推荐文章于 2023-10-15 19:40:15 发布

会飞的鱼—

最新推荐文章于 2023-10-15 19:40:15 发布

阅读量631

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_47657875/article/details/132604895

版权

         <el-form
            :inline="true"
            ref="formInlineREF"
            :model="formInline"
            class="demo-form-inline"
            :rules="rule"
            label-position="top"
          >
            <el-form-item label="车辆类型名称" prop="typeName" style="width: 100%">
              <el-input v-model="formInline.typeName" placeholder="请输入" clearable />
            </el-form-item>
         </el-form>

const formInlineREF = ref(null)
const rule = reactive({
  typeName: [
    { required: true, validator: validateMaxWellTime, trigger: 'blur' }
  ]
})
function validateMinWellTime(rule, value, callback) {
  if (typeName == '') {
    callback(new Error('最小工作时间至少需要填写'));
  } else {
    callback();
  }
}

    formInlineREF.value.validate(async (valid, fields) => {
      if (valid) {
        console.log('通过效验')
      } else {
        return ElMessage.warning('请填写必填项')
      }
    })