vue element 表单校验判断输入是否有指定值

在Vue Element中，你可以使用表单校验器来判断输入是否有指定的值。下面是一个简单的示例代码：

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item prop="inputValue" label="输入值">
      <el-input v-model="form.inputValue"></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 {
      form: {
        inputValue: ''
      },
      rules: {
        inputValue: [
          { required: true, message: '请输入值', trigger: 'blur' },
          { validator: this.validateInputValue, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    validateInputValue(rule, value, callback) {
      if (value === '指定值') {
        callback();
      } else {
        callback(new Error('输入值不符合要求'));
      }
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单校验通过，执行提交操作
          console.log('表单校验通过');
        } else {
          // 表单校验不通过
          console.log('表单校验不通过');
        }
      });
    }
  }
};
</script>

在上面的示例中，我们首先定义了一个表单对象 `form`，其中包含一个 `inputValue` 属性来存储输入的值。然后，我们定义了校验规则 `rules`，其中 `inputValue` 属性的校验规则包括必填规则和自定义的校验器规则。

在 `validateInputValue` 方法中，我们使用自定义的校验器来判断输入值是否为指定值。如果输入值等于 '指定值'，则调用 `callback()` 方法表示校验通过；否则，调用 `callback(new Error('输入值不符合要求'))` 方法表示校验不通过。

最后，在 `submitForm` 方法中，我们通过 `$refs.form.validate()` 方法对整个表单进行校验。如果表单校验通过，就可以执行提交操作；否则，可以进行相应的错误处理。

这是一个简单的示例，你可以根据具体的需求进行更复杂的表单校验判断。希望对你有所帮助！