如何在vue.js中进行表单验证并提交表单?(没有插件)

Question

我有这个表单，我想对它进行验证，但在我按下提交按钮后，它不会检查验证并将新数据发送到另一个组件。我如何修复验证？

谢谢你的帮助。

这是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(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 2

我认为您只需要一个简单的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 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>