el-form手动校验

el-form 提供了手动触发校验的方法 validate，可以通过该方法来进行表单校验。具体操作步骤如下：

1. 给 el-form 组件设置 ref 属性，例如：`<el-form ref="myForm">`。

2. 在需要触发校验的时候，调用该组件的 `validate` 方法，例如：`this.$refs.myForm.validate((valid) => {...})`。

3. `validate` 方法接收一个回调函数，当校验完成后会自动调用该回调函数，并传入一个表示校验结果的参数 valid。

4. 在回调函数中可以根据校验结果 valid 来进行相应的操作，例如提交表单或者提示用户输入有误等。

需要注意的是，如果 el-form 中有需要校验的 el-form-item 组件，那么在调用 validate 方法之前需要先手动触发这些 el-form-item 的校验，可以通过调用它们的 `validate` 方法来实现，例如：`this.$refs.myFormItem.validate()`。

相关问题

el-form设置校验change，值改变后校验结果未消失

在 Element UI 的表单组件 `<el-form>` 中，你可以通过设置 `:validate-on-rule-change="false"` 来禁用在规则改变时自动触发校验。这样，当表单项的值改变时，校验结果不会立即消失，而是等待用户手动提交表单或者手动触发校验时才会更新校验结果。

示例代码：

<template>
  <el-form :model="form" :rules="rules" :validate-on-rule-change="false">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username" @change="handleInputChange('username')"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password" @change="handleInputChange('password')"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 3, max: 10, message: '用户名长度为 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度为 6 到 20 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handleInputChange(field) {
      // 手动触发校验
      this.$refs.form.validateField(field);
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单校验通过，提交表单数据
          console.log(this.form);
        } else {
          // 表单校验未通过，提示用户错误信息
          this.$message.error('表单校验未通过，请检查输入！');
        }
      });
    }
  }
};
</script>

在上述示例中，我们将 `validate-on-rule-change` 属性设置为 `false`，并且在表单项的值改变时手动触发校验。当用户点击提交按钮时，我们再次手动触发表单校验，以确保最终提交的数据符合校验规则。

el-form-item校验

el-form-item校验是指在使用 Element UI 的 el-form 组件中，对表单项（el-form-item）进行校验的过程。通过校验可以验证用户输入是否符合预设的规则，例如是否为空、格式是否正确等。

在 Element UI 中，el-form-item 校验可以通过以下几种方式进行：

1. 使用内置的校验规则：Element UI 提供了一些常用的校验规则，如 required（必填）、email（邮箱格式）、url（网址格式）等。可以通过设置规则属性（rules）来应用这些内置规则。

2. 自定义校验函数：可以根据具体需求编写自定义校验函数，并将其作为规则属性的一部分。自定义校验函数需要返回一个 Boolean 值，true 表示校验通过，false 表示校验失败。

3. 异步校验：有时候需要进行异步的校验，例如通过接口验证某个字段的唯一性。可以使用 async-validator 库提供的功能来实现异步校验。

一般情况下，el-form-item 会在表单提交或手动触发校验时进行校验。可以通过调用表单对象的 validate 方法来触发校验，并通过表单对象的 validate 方法的回调函数来处理校验结果。

希望以上信息能对您有所帮助，如果还有其他问题，请继续提问。