Vue + Element UI Form 表单单项校验技巧

Vue + Element UI Form 表单单项校验技巧

想要实现只校验表单中其中一项的功能，可以使用自定义校验规则来实现。

1. 设置自定义校验规则

首先，你需要在 form 表单中为每个需要校验的项设置一个自定义校验规则。可以使用 rules 属性来设置校验规则。例如：

<el-form :model='form' ref='form' :rules='rules'>
  <el-form-item label='用户名' prop='username'>
    <el-input v-model='form.username'></el-input>
  </el-form-item>
  <el-form-item label='密码' prop='password'>
    <el-input v-model='form.password' type='password'></el-input>
  </el-form-item>
</el-form>

2. 定义校验规则对象

然后，在 Vue 实例中定义 rules 对象，其中每个属性对应一个校验规则。例如：

data() {
  return {
    form: {
      username: '',
      password: ''
    },
    rules: {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
      ]
    }
  };
}

3. 使用 validateField 方法进行校验

最后，在提交表单时，你可以使用 this.$refs.form.validateField 方法来校验指定的字段。例如，如果你只想校验密码字段，可以这样写：

this.$refs.form.validateField('password', (errorMsg) => {
  if (errorMsg) {
    // 校验不通过
  } else {
    // 校验通过
  }
});

这样就可以只校验其中一项了。

注意：

• 校验方法中的第一个参数是要校验的字段名，第二个参数是一个回调函数，用于返回校验结果。
• 如果校验不通过，errorMsg 参数将会是一个错误信息数组；如果校验通过，errorMsg 参数将会是一个空数组。

通过以上步骤，你就可以轻松实现 Vue + Element UI Form 表单的单项校验功能。