我有这个代码
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form name="myForm" action="/action_page.php" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
如果字段未填写，我不希望用户提交
我给你买了
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="/action_page.php"
onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
您可以直接在输入字段中使用Html5required属性，因此您的代码段变成：
<form name="myForm" action="/action_page.php" method="post">
Name: <input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
来源：https://www.w3schools.com/TAgs/att_input_required.asp
检查此项：
let form = document.forms['myForm'];
let input = form.querySelector('input[name="fname"]');
form.addEventListner('submit',(e) => {
if(!input.length){
e.preventDefault():
}
})