elementUI el-form单独校验某个值

在Element UI中，您可以使用this.$refs来访问特定表单项的验证方法。以下是一个例子，演示如何仅验证el-form中的一个特定值：

<template>
  <el-form ref="form">
    <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 type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-button @click="validateUsername">验证用户名</el-button>
  </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: 12, message: '密码长度在 6 到 12 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    validateUsername() {
      this.$refs.form.validateField('username', valid => {
        if (valid) {
          console.log('用户名验证通过');
        } else {
          console.log('用户名验证失败');
        }
      });
    }
  }
};
</script>

在这个例子中，我们定义了一个带有username和password字段的表单，并设置了相应的验证规则。validateUsername方法通过this.$refs.form.validateField调用只验证username字段。如果验证通过，它会输出一条消息，如果验证失败，它也会输出一条消息。