如果表单在 vee 验证中的 vue3 cli 组合 apis 中无效，如何停止表单提交

大佬教程收集整理的这篇文章主要介绍了如果表单在 vee 验证中的 vue3 cli 组合 apis 中无效，如何停止表单提交，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如果表单在 vee 验证中的 vue3 cli 组合 apis 中无效，如何停止表单提交？

我是 vue3 和组合 API 的新手。 验证简单表单存在问题。 如果表单无效或未触摸，我试图停止表单提交，因为如果输入未触摸，默认情况下它是有效的。

登录.vue

<form @submit="onsubmit">
  <div class="form-group">
    <input
      name="email"
      type="text"
      v-model="email"
    />
    <span>{{ emailError }}</span>
  </div>
  <div class="form-group">
    <input
      name="password"
      type="password"
      v-model="password"
    />
    <span>{{ passwordError }}</span>
  </div>
  <div class="login-buttons">
    <button
      type="submit"
    >
      {{ $t("login.login") }}
    </button>
  </div>
</form>

登录.Js

<script>
import { useForm,useFIEld,useIsFormValID } from "vee-valIDate";
import * as yup from "yup";

export default {
  name: "LoginPage",setup() {
    const {
      errors,handlesubmit,valIDate,} = useForm();


    // define a valIDation scheR_296_11845@a
    const scheR_296_11845@a = yup.object({
      email: yup
        .String()
        .required()
        .email(),password: yup
        .String()
        .required()
        .min(8),});

    // Create a form context with the valIDation scheR_296_11845@a
    useForm({
      valIDationscheR_296_11845@a: scheR_296_11845@a,});

    // No need to define rules for fIElds
    const { value: email,errormessage: emailError } = useFIEld(
      "email"
    );
    const { value: password,errormessage: passwordError } = useFIEld(
      "password"
    );

    const onsubmit = handlesubmit(async () => {
      const { valID,errors } = await valIDate();
      if (valID.value === falsE) {
        return;
      } else {
        const response = await http.post(APIs.login,data);
      }
    });

    return {
      email,emailError,password,passwordError,onsubmit
    };
  },};
</script>

在handelsubmit 函数中，如果(vaild.value === falsE) 它应该返回并停止逻辑，但vaild 的值始终为true，因此它继续对API 的http 调用。

只有在使用组合 API 使表单无效时才停止向 发送数据

解决方法

const scheR_296_11845@a = yup.object({
  email: yup.String().required().email(),password: yup.String().required().min(8),});

const { errors,handleSubmit,validate } = useForm({
  validationscheR_296_11845@a: scheR_296_11845@a
});