Element Plus 2.8.5 表单验证设置 error 参数后为何验证通过？

Question

使用了error参数, 根据文档描述" 表单域验证错误时的提示信息。设置该值会导致表单验证状态变为 error，并显示该错误信息", 但是为何表单验证的结果还是验证通过
element-plus 版本 : 2.8.5

<el-form-item
                            class="serial-number"
                            label="Serial number"
                            prop="serial_number"
                            ref="serialNumberItemRef"
                            :error="111111111"
                            validate-status="error"
                    >
</el-form-item>```

Answer 1

需要补全你的 el-form 和你在 el-form 上绑定的 rules 规则。
现在不知道你的是怎么去校验表单的，只能看到说你好想是直接修改了 error 信息而已。

这里官方的表单校验Demo 👉 #表单校验 - Form 表单 | Element Plus

对比一下你是否是按照标准用法，通过 refs 注册了 el-form 组件实例，并且调用了 elForm 组件下的 validate 方法。

<template>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto">
    <el-form-item label="Activity name" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        Create
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

interface RuleForm {
  name: string
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: ''
})


const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' }
  ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>