el-form-item 有值失焦被校验

`el-form-item`是Element UI库中的一个组件，它通常用于表单验证。当一个`el-form-item`内的输入元素失去焦点（blur事件触发），如果该字段设置了必填项(`rules`)并且用户未填写或填写的内容不符合规则，那么就会触发验证。验证失败时，会显示相应的错误提示信息，并且整个表单的状态会被更新，表示有字段未通过验证。

例如，在Vue的模板中，你可能会这样配置：

<el-form :model="form">
  <el-form-item label="姓名" prop="name">
    <el-input v-model="form.name"></el-input>
    <el-form-item-explain :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"></el-form-item-explain>
  </el-form-item>
</el-form>

在这里，当用户离开姓名输入框后，如果没有输入或者输入的不是有效的内容，`required`规则就会触发，显示错误消息。

相关问题

el-form-item内 循环el-form-item el-form-item输入内容了,但是失去叫焦点为什么会校验

el-form-item内循环el-form-item时，如果输入内容后失去焦点，仍然会进行校验的原因是因为el-form-item内部的el-form-item会继承父级el-form-item的校验规则。所以即使子级el-form-item输入了内容，但是失去焦点后，父级el-form-item仍然会进行校验。

为了解决这个问题，可以在子级el-form-item上添加`prop`属性，并将其设置为一个唯一的值，以避免继承父级校验规则。例如：

<el-form-item prop="childFormItem">
  <el-form-item>
    <el-input v-model="inputValue"></el-input>
  </el-form-item>
</el-form-item>

这样，子级el-form-item就会独立进行校验，不会受到父级el-form-item的影响。

el-form-renderer 里面el-form-item校验 rules

el-form-renderer是一个基于Element UI的表单渲染器，用于简化表单的开发和校验。而el-form-item是el-form-renderer中的一个组件，用于包裹表单项并进行校验。

在el-form-item中，可以通过rules属性来定义校验规则。rules属性是一个数组，每个元素都是一个对象，用于描述一个校验规则。每个规则对象包含以下属性：

1. required（必填）：指定该字段是否为必填项，可以是一个布尔值或者一个函数。如果是函数，则根据函数的返回值来确定是否必填。
2. validator（自定义校验函数）：指定一个自定义的校验函数，该函数接收三个参数：rule（当前规则对象）、value（当前字段的值）和callback（回调函数）。在自定义校验函数中，可以根据具体的业务逻辑进行校验，并通过调用callback回调函数来返回校验结果。
3. trigger（触发方式）：指定触发校验的方式，默认为'change'，即在字段值改变时触发校验。还可以设置为'blur'（失去焦点时触发校验）或'submit'（表单提交时触发校验）。
4. message（错误提示信息）：指定校验失败时的错误提示信息。

以下是一个示例代码，展示了如何在el-form-renderer中使用el-form-item进行校验规则的定义：

<el-form-renderer :model="formData" :rules="formRules">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="formData.username"></el-input>
  </el-form-item>
</el-form-renderer>

data() {
  return {
    formData: {
      username: ''
    },
    formRules: {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 6, max: 12, message: '用户名长度在6到12个字符之间', trigger: 'blur' }
      ]
    }
  };
}