如何进行表单验证，然后在 vue.js 中提交表单？（无插件）

Question

我有这个表格，我想对其进行验证，但在我按下提交按钮后，它不检查验证并将新数据发送到另一个 component.how 我可以修复验证吗？

感谢您的帮助。

这是 html代码和 form:

    <form @submit.prevent="handleSubmit">
      <input type="text" required placeholder="name" v-model="firstName" />
      <div v-if="firstNameError" class="error">{{ firstNameError }}</div>
      <input type="text" required placeholder="lastname" v-model="lastName"/>
      <div v-if="lastNameError" class="error">{{ lastNameError }}</div>
      <input type="tel" required placeholder="mobilenumber" v-model="Mobile" />
      <div v-if="MobileError" class="error">{{ MobileError }}</div>
      <input type="tel" required placeholder="phonenumber" v-model="phone" />
      <div v-if="PhoneError" class="error">{{ PhoneError }}</div>
      <input type="text" required placeholder="address" v-model="address" />
      <div v-if="addressError" class="error">{{ addressError }}</div>
      <select v-model="gender">
        <option value="female">female</option>
        <option value="male">male</option>
      </select>
      <button>submit</button>
    </form>

和script代码：

<script>
export default {
  data() {
    return {
      firstName: "",
      lastName: "",
      Mobile: "",
      phone: "",
      address: "",
      gender: "",
      firstNameError: "",
      lastNameError: "",
      MobileError: "",
      PhoneError: "",
      addressError: "",
    };
  },
  methods: {
    handleSubmit() {
        this.firstNameError =
          this.firstName.length > 3
            ? ""
            : "firstName must have at least 3 character";

        this.lastNameError =
          this.lastName.length > 3
            ? ""
            : "lastName must have at least 3 character";

        this.MobileError =
          this.Mobile.length > 11
            ? ""
            : "number must have at least 11 character";
        this.PhoneError =
          this.phone.length > 11
            ? ""
            : "number must have at least 11 character";
        this.addressError =
          this.address.length > 5
            ? ""
            : "address must have at least 5 character";
        let project = {
          firstName: this.firstName,
          lastName: this.lastName,
          Mobile: this.Mobile,
          phone: this.phone,
          address: this.address,
          gender: this.gender,
        };
        console.log(project);
        fetch("http://localhost:8000/forms", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(project),
        })
          .then(() => {
            this.$router.push("/");
          })
          .catch((err) => console.log(err));
      
    },
  },
};
</script>

Answer 1

我认为您只需要一个简单的 IF 语句即可。检查没有错误，然后提出请求。

所以，我们可以这样来做。

// Stop the process if there is any errors
if (this.firstNameError || this.lastNameError || this.MobileError || this.PhoneError || this.addressError) {
  return;
}

// Continue the process here
let project = {...};

Answer 2

判断错误后直接return停止后续代码的执行，像这样：

      if(this.firstName.length <= 3){
        this.firstNameError = "firstName must have at least 3 character";
        return
      }
      this.firstNameError = '';
      if(this.lastName.length <= 3){
        this.lastNameError = "lastName must have at least 3 character";
        return
      }
      this.lastNameError = '';
      if(this.Mobile.length <= 11){
        this.MobileError = "number must have at least 11 character";
        return
      }
      this.MobileError = '';
      if(this.phone.length <= 11){
        this.PhoneError = "number must have at least 11 character";
        return
      }
      this.PhoneError = '';
      if(this.address.length <= 5){
        this.addressError = "address must have at least 5 character";
        return
      }
      this.addressError = '';

新回复：

    handleSubmit() {
      this.firstNameError =
          this.firstName.length > 3
            ? ""
            : "firstName must have at least 3 character";

        this.lastNameError =
          this.lastName.length > 3
            ? ""
            : "lastName must have at least 3 character";

        this.MobileError =
          this.Mobile.length > 11
            ? ""
            : "number must have at least 11 character";
        this.PhoneError =
          this.phone.length > 11
            ? ""
            : "number must have at least 11 character";
        this.addressError =
          this.address.length > 5
            ? ""
            : "address must have at least 5 character";

      // set a flag
      let flag = !(this.firstNameError || this.lastNameError || this.MobileError || this.PhoneError || this.addressError);
      if(flag){
        let project = {
          firstName: this.firstName,
          lastName: this.lastName,
          Mobile: this.Mobile,
          phone: this.phone,
          address: this.address,
          gender: this.gender,
        };
        console.log(project);
        fetch("http://localhost:8000/forms", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(project),
        })
          .then(() => {
            this.$router.push("/");
          })
          .catch((err) => console.log(err));
      }
    },

Answer 3

添加if-else语句：


<script>
export default {
  data() {
    return {
      firstName: "",
      lastName: "",
      Mobile: "",
      phone: "",
      address: "",
      gender: "",
      firstNameError: "",
      lastNameError: "",
      MobileError: "",
      PhoneError: "",
      addressError: "",
    };
  },
  methods: {
    handleSubmit() {
      if (
        !this.firstNameError &&
        !this.lastNameError &&
        !this.MobileError &&
        !this.PhoneError &&
        !this.addressError
      ) {
        this.firstNameError =
          this.firstName.length > 3
            ? ""
            : "firstName must have at least 3 character";

        this.lastNameError =
          this.lastName.length > 3
            ? ""
            : "lastName must have at least 3 character";

        this.MobileError =
          this.Mobile.length > 11
            ? ""
            : "number must have at least 11 character";
        this.PhoneError =
          this.phone.length > 11
            ? ""
            : "number must have at least 11 character";
        this.addressError =
          this.address.length > 5
            ? ""
            : "address must have at least 5 character";
      } else {
        let project = {
          firstName: this.firstName,
          lastName: this.lastName,
          Mobile: this.Mobile,
          phone: this.phone,
          address: this.address,
          gender: this.gender,
        };
        console.log(project);
        fetch("http://localhost:8000/forms", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(project),
        })
          .then(() => {
            this.$router.push("/");
          })
          .catch((err) => console.log(err));
      }
    },
  },
};
</script>

如何进行表单验证，然后在 vue.js 中提交表单？（无插件）

how to make a form validation and then submit form in vue.js?(without plugins)

javascript

forms

validation

vue.js

json-server