时间戳

首页 > 解决方案 > 提交前验证问题

javascript - 提交前验证问题

问题描述

我正在尝试从 VeeValidate 文档中获取一个示例来工作。可以在这里找到。我显然错过了一些东西，但我不知道是什么。

我的表单始终有效，即使我没有在输入中添加任何文本。我是否需要以某种方式自定义所需的规则？ 代码沙盒

<template>
  <ValidationObserver ref="observer" v-slot="{ invalid }" tag="form" @submit.prevent="submit()">
    <input type="text" rules="required">
    <br>
    <input type="text" rules="required">
    <br>
    <button :disabled="invalid">Submit</button>
  </ValidationObserver>
</template>

<script>
import { ValidationObserver } from "vee-validate";

export default {
  components: {
    ValidationObserver
  },
  methods: {
    async submit() {
      const isValid = await this.$refs.observer.validate();

      console.log("Form is valid", isValid);

      if (!isValid) {
        // ABORT!!
      }

      //  ship it
    }
  }
};
</script>

标签： javascriptvalidationvue.jsvee-validate

解决方案

每个输入都需要包装在一个ValidationProvider. 改变这个：

<input type="text" rules="required">

对此：

<ValidationProvider rules="required">
    <input type="text" rules="required" v-model="something">
</ValidationProvider>

此外，在某个地方，您需要实际定义要使用的规则，所以在文件的顶部我放了这个：

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

extend('required',required);

您的代码沙箱的工作副本（我还更新了 vee-validate 和 vue 到最新版本）： https ://codesandbox.io/s/vue-template-dj9jn

要实际获得示例中提到的行为，而不是使用invalid标志ValidationObserver，请尝试使用如下handleSubmit方法：

<ValidationObserver tag="form" v-slot="{handleSubmit}" @submit.prevent>
  ... 
  <button @click="handleSubmit(submit)">Submit</button>

您的提交功能将如下所示：

submit() {
    //anything you do here will only be called when the form is valid
}

推荐阅读