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内嵌套el-form校验不起作用

在Element UI中，如果你在一个`el-form`组件内部嵌套另一个`el-form`，并且想要进行整体的校验，可能会遇到一些问题。这是因为Element UI默认只对顶级`el-form`的表单数据进行验证。当你在子`el-form`中添加验证规则并提交，这些规则并不会影响到父级的验证状态。

要解决这个问题，你可以尝试以下几个步骤：

1. **手动触发验证**：在子`el-form`的提交事件中，手动调用`this.$refs.form.validate()`来触发整个表单的验证。

<template>
  <div>
    <el-form ref="parentForm">
      <!-- ... -->
      <el-form :ref="childForm" :model="childFormData">
        <!-- ... -->
        <el-form-item v-if="shouldValidateChild">
          <!-- 子form验证项 -->
        </el-form-item>
      </el-form>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childFormData: {},
      shouldValidateChild: false,
    };
  },
  methods: {
    handleSubmit() {
      // 先验证子form
      this.shouldValidateChild = true;
      this.$nextTick(() => {
        if (this.childFormData.valid) { // 判断子form是否有效
          this.$refs.parentForm.validate();
        }
      });
    },
  },
};
</script>

2. **自定义验证策略**：如果需要更复杂的验证逻辑，可以考虑将子form单独封装成一个组件，并提供一个方法供外部调用来验证整个表单结构。

3. **父子联动**：如果子form的验证结果对父form有直接影响，你可能需要通过props或者Vuex等状态管理工具来传递验证结果，并相应地更新父级的状态。

请注意，上述方法可能需要结合具体的项目需求进行调整。若还有其他疑问或遇到具体问题，请详细描述以便我能给出准确的帮助。

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`，并且在表单项的值改变时手动触发校验。当用户点击提交按钮时，我们再次手动触发表单校验，以确保最终提交的数据符合校验规则。