Vue 表单提交前数据验证：使用 VeeValidate 库

在 Vue 中，可以使用一些第三方库或者自己编写验证逻辑来对表单数据进行验证。下面是一个简单的验证示例：

安装 'vee-validate' 库

npm install vee-validate

创建表单组件

<template>
  <form @submit.prevent='submitForm'>
    <div>
      <label>Username:</label>
      <input v-model='username' type='text' name='username' />
      <span>{{ errors.first('username') }}</span>
    </div>
    <div>
      <label>Password:</label>
      <input v-model='password' type='password' name='password' />
      <span>{{ errors.first('password') }}</span>
    </div>
    <button type='submit'>Submit</button>
  </form>
</template>

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

extend('min', min);

export default {
  components: {
    ValidationObserver,
    ValidationProvider,
  },
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    async submitForm() {
      try {
        await this.$refs.observer.validate();
        // Handle form submission
      } catch (error) {
        // Handle validation errors
      }
    },
  },
};
</script>

在表单组件中使用 'ValidationObserver' 和 'ValidationProvider' 组件进行验证

<template>
  <form @submit.prevent='submitForm'>
    <validation-observer ref='observer'>
      <div>
        <label>Username:</label>
        <validation-provider name='username' rules='required|min:3' v-slot='{ errors }'>
          <input v-model='username' type='text' name='username' />
          <span>{{ errors[0] }}</span>
        </validation-provider>
      </div>
      <div>
        <label>Password:</label>
        <validation-provider name='password' rules='required|min:6' v-slot='{ errors }'>
          <input v-model='password' type='password' name='password' />
          <span>{{ errors[0] }}</span>
        </validation-provider>
      </div>
      <button type='submit'>Submit</button>
    </validation-observer>
  </form>
</template>

<script>
import { ValidationObserver, ValidationProvider } from 'vee-validate';

export default {
  components: {
    ValidationObserver,
    ValidationProvider,
  },
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    async submitForm() {
      try {
        await this.$refs.observer.validate();
        // Handle form submission
      } catch (error) {
        // Handle validation errors
      }
    },
  },
};
</script>

在上面的示例中，我们使用 'vee-validate' 库来验证表单数据。首先，我们使用 'extend' 函数来扩展 'vee-validate' 的默认规则，然后在表单组件中使用 'ValidationObserver' 和 'ValidationProvider' 组件来进行验证。在 'ValidationProvider' 组件中，我们指定了验证规则和错误提示信息，并使用 'v-slot' 来获取错误信息。最后，我们在表单提交时使用 'validate' 方法来进行验证，并在出现错误时处理错误信息。