VeeValidate 2.2.15 select示例

以下是一个使用VeeValidate 2.2.15对select表单进行验证的示例：

<template>
  <div>
    <form @submit.prevent="submitForm">
      <div class="field">
        <label class="label">Select an option:</label>
        <div class="control">
          <div class="select">
            <select name="selectValue" v-model="selectValue" v-validate="'required'">
              <option value="">Please select an option</option>
              <option value="option1">Option 1</option>
              <option value="option2">Option 2</option>
              <option value="option3">Option 3</option>
            </select>
          </div>
        </div>
        <div v-show="errors.has('selectValue')" class="help is-danger">{{ errors.first('selectValue') }}</div>
      </div>
      <div class="field">
        <div class="control">
          <button class="button is-link">Submit</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import { required } from "vee-validate/dist/rules";
import { extend } from "vee-validate";
import { ValidationProvider, ValidationObserver } from "vee-validate";

extend("required", {
  ...required,
  message: "This field is required"
});

export default {
  name: "SelectExample",
  components: {
    ValidationProvider,
    ValidationObserver
  },
  data() {
    return {
      selectValue: ""
    };
  },
  validations: {
    selectValue: {
      required: true
    }
  },
  methods: {
    submitForm() {
      this.$validator.validateAll().then(result => {
        if (result) {
          // 表单验证通过，可以进行提交操作
          console.log("Form submitted successfully");
        }
      });
    }
  }
};
</script>

这个示例中，我们使用了VeeValidate的required规则对select表单进行必填验证，使用v-show指令来显示或隐藏错误信息。同时，在表单提交时，我们调用了$validator.validateAll()方法进行验证，如果验证通过，就进行提交操作。