form.addEventListener('submit',(event)=>{
event.preventDefault()
const input=[nameinput,desc,number];
if(nameinput.value.trim() && desc.value.trim() && number.value.trim()){
let obj = {
name: nameinput.value,
desc: desc.value,
price: number.value
}
axios.post("http://localhost:3000/Pulse", obj)
.then(res => {
window.location = "./index.html"
})
}
})
如何使用 javascript 添加表单验证？必需的。 要在 JavaScript 中添加表单验证，您可以在提交表单之前检查输入值是否满足特定条件。例如，您可以检查字段是否不为空。
如何使用 javascript 添加表单验证？必需的。 要在 JavaScript 中添加表单验证，您可以在提交表单之前检查输入值是否满足特定条件。例如，您可以检查字段是否不为空。
let form = document.querySelector('form')
let nameinput = document.getElementById('name')
let desc = document.getElementById('desc')
let number = document.getElementById('number')
let submit = document.getElementById('submit')
let table = document.getElementById('table')
fetch(`http://localhost:3000/Pulse`)
.then(res => res.json())
.then(data => {
data.forEach(element => {
table.innerHTML += `
<tr>
<td>${element.id}</td>
<td>${element.name}</td>
<td>${element.desc}</td>
<td>${element.price}</td>
<td>
<button onclick="remove(${element.id})">delete</button>
</td>
</tr>
`
});
})
function remove(id){
axios.delete(`http://localhost:3000/Pulse/${id}`)
}
form.addEventListener('submit',(event)=>{
event.preventDefault()
const input=[nameinput,desc,number];
if(nameinput.value.trim() && desc.value.trim() && number.value.trim()){
let obj = {
name: nameinput.value,
desc: desc.value,
price: number.value
}
axios.post("http://localhost:3000/Pulse", obj)
.then(res => {
window.location = "./index.html"
})
}
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="assets/scss/style.css">
</head>
<body>
<section id="add">
<div class="container">
<div class="add">
<form action="add" >
<label for="name">Name:</label>
<input type="text" name="" id="name" required>
<input type="text" name="" id="desc" required>
<input type="number" name="" id="number" required>
<input type="submit" name="" id="submit">
</form>
<table id="table">
<tr>
<th>id</th>
<th>name</th>
<th>description</th>
<th>price</th>
<th></th>
</tr>
</table>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="assets/js/add.js"></script>
</body>
</html>