el-form校验触发不通过trigger

在Element UI的`el-form`组件中，校验触发通常有两种方式：`inline`验证和自定义验证。

1. **Inline验证**：默认情况下，当表单字段的内容发生改变并不符合预设规则时，就会自动触发校验。这通常是基于HTML5的`required`、`min`、`max`等内置属性来进行的。你可以直接设置这些属性来控制何时触发校验。

   <el-form :inline="true" :rules="formRules">
     <!-- ... -->
   </el-form>

`formRules`是一个对象，每个字段对应的值就是该字段的验证规则，例如：

   const formRules = {
     username: { required: true, message: '请输入用户名', trigger: 'blur' }, // blur表示输入失去焦点时触发
   };

2. **自定义验证**：如果你需要更复杂的校验逻辑或者特定的触发时机，可以使用`validateField`方法手动触发校验。这个方法接受字段名作为参数。

   this.$refs.form.validateField('username'); // 指定某个字段进行校验

如果你想让整个表单一次性验证所有字段，可以使用`validate`方法：

this.$refs.form.validate(); // 触发完整表单的校验

相关问题

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' }
      ]
    }
  };
}

el-form 触发校验方法

要触发 el-form 的校验方法，可以使用 el-form 的 ref 属性获取到 el-form 实例，然后调用实例的 validate 方法即可。示例代码如下：

<template>
  <el-form ref="form" :model="formData" :rules="formRules">
    <el-form-item prop="username" label="用户名">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>
    <el-form-item prop="password" label="密码">
      <el-input v-model="formData.password" type="password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      },
      formRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单校验通过，可以提交数据
          // ...
        } else {
          // 表单校验不通过，不提交数据
          return false
        }
      })
    }
  }
}
</script>

在上面的示例代码中，我们给 el-form 绑定了一个 ref 属性，然后在 submitForm 方法中通过 this.$refs.form 获取到 el-form 实例，并调用 validate 方法进行校验。validate 方法的回调函数会传入一个布尔值 valid，表示表单校验是否通过。如果校验通过，可以执行相应的操作，比如提交表单数据；如果校验不通过，可以返回 false，阻止表单提交。