vue 提交表单前先对表单数据进行验证

在 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 方法来进行验证，并在出现错误时处理错误信息