jsw/axios的表单验证

Question

我的代码在提交前验证表单中的所有字段是否已填写时遇到问题。我试着在我的事件监听器中放入if语句，但它似乎不起作用。我想知道是否有人知道如何做到这一点。我看了W3和其他例子，但它们似乎不起作用。这是我的密码。我也不想用HTML验证来做这件事，因为进入开发工具并删除输入元素的必需属性很容易。如有任何帮助，我们将不胜感激。我还附上了CSS用于样式设计。

var form = document.querySelector("#user_form");
let reqHeaders = {
headers: {
Authorization: "Bearer ",
}
}
let url = "https://api.airtable.com/v0/appMPvHoTHviahyfz/email-list"
let reqData = {
records: [
{
fields: null
}
]
}
let formData = {
firstName: "",
lastName: "",
email: ""
}
function logData(id, dataObj, value) {
dataObj[id] = value;
console.log(value)
}
form.addEventListener("submit", function (e) {
e.preventDefault();
reqData.records[0].fields = formData;
console.log(reqData);
axios.post(url, reqData, reqHeaders).then(res => {
document.querySelector('.success-messg').style.display = 'block';
setTimeout(function(){
form.reset();
document.querySelector('.success-messg').style.display = 'none';
},2000)
})
.catch (err => {
if (err.reponse){
document.querySelector('.fail-messg').style.display = 'block';
setTimeout(function(){
document.querySelector('.fail-messg').style.display = 'none';
form.reset();
}, 3000)
} else if (err.request) {
document.querySelector('.fail-messg').style.display = 'block';
setTimeout(function(){
document.querySelector('.fail-messg').style.display = 'none';
form.reset();
}, 3000)
} else {
console.log(err);
}
})
});

.form-wrapper{
text-align: center;
}
#user_form{
height: 11rem;
width:30rem;
position:absolute;
margin:auto;
bottom:0;
top:55vh;
left:0;
right:0;
opacity:0;
z-index:4;
}
.form-wrapper input{
border:0;
color:black;
background-color:#f9da06;
border-bottom:2px solid black;
width:10.5rem;
margin:1.2rem;
}
.form-wrapper input:focus{
border:0;
border-bottom:2px solid black;
outline:none;
}
.form-wrapper ::placeholder {
color:black;
opacity: 1;
}
#info-submit{
background-color:black;
font-size: 20px;
color:#f9da06;
border:0;
cursor: pointer;
height:2.289rem;
width:10.5rem;
outline:0;
}
.success-messg {
font-size: 16px;
text-align: center;
color: black;
height:4rem;
position:absolute;
margin:auto;
bottom:0;
top:80vh;
left:0;
right:0;
display:none;
}
.fail-messg{
text-align: center;
font-size: 14px;
color: black;
height: 2rem;
position:absolute;
margin:auto;
bottom:0;
top:80vh;
left:0;
right:0;
display:none;
}

<div class="form-wrapper">
<form id="user_form">
<input type="name" id="firstName" placeholder="First Name..." name="Firstname" onChange="logData(id, formData, this.value)">
<input type="name" id="lastName" placeholder="Last Name..." name="Lastname" onChange="logData(id, formData, this.value)">
<input type="email" id="email" placeholder="Email..." name="email" onChange="logData(id, formData, this.value)">
<input type="submit" id="info-submit" value="Submit">
</form>
<div class="success-messg"><p>Thank you for your submission!</p></div>
<div class="fail-messg"><p>Sorry, we were unable to take your submission at this time.</p></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 1

您的CSS片段似乎不起作用，但我会尽我所能帮助您。

你可以做一些事情，比如在事件侦听器函数中制作一个try-catch块，然后抛出每个特定于自己的错误，然后每个错误都用你心目中的特定任务来处理，通过查看你的代码，我建议你看看这一点，然后自己尝试。

form.addEventListener("submit", function (e) {
e.preventDefault();
try {
//Throw an error if a field in the form is an empty string
for (const data in formData) {
if (formData[data] === "") {
const error = new Error();
//Set the not valid attribute to true so that it can be handled specifically
error.notValid = true;
throw error;
}
}
reqData.records[0].fields = formData;
console.log(reqData);
axios
.post(url, reqData, reqHeaders)
.then((res) => {
document.querySelector(".success-messg").style.display = "block";
setTimeout(function () {
form.reset();
document.querySelector(".success-messg").style.display = "none";
}, 2000);
})
.catch((err) => {
//Throw back the axios error
throw err;
});
} catch (err) {
if (err.reponse) {
document.querySelector(".fail-messg").style.display = "block";
setTimeout(function () {
document.querySelector(".fail-messg").style.display = "none";
form.reset();
}, 3000);
} else if (err.request) {
document.querySelector(".fail-messg").style.display = "block";
setTimeout(function () {
document.querySelector(".fail-messg").style.display = "none";
form.reset();
}, 3000);
} else if (err.notValid) {
console.log("Notvalid");
//Do what you want if the form is not validated
} else {
console.log(err);
}
}
});

使用ES2017 async/await并将其与try-catch块相结合，这种类型的错误处理更容易、更干净。例如，在您的代码中，axios返回一个Promise，它可以用async/await处理。

有关错误处理和使用异步/等待的更多信息：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await

我建议您也进行服务器端验证，因为即使使用开发工具，仍然可以更改前端JavaScript代码。