我大约 2 周前开始学习 javascript，所以我真的很新。我一直在乱弄表格，但我想不出一些东西。
我用 HTML 制作了一个表单，想用 Javascript 验证它。
到目前为止我做了什么:
如果字段为空并且用户按下提交，则字段周围将出现红色边框。如果用户在字段中写一些东西，边框就会消失。
我想做的事情:
如果没有验证错误并且表单已提交，我希望在表单上方显示一条确认消息。该消息最初应该是隐藏的，它应该是这样的:“感谢您联系我们，(以及用户在表单中输入的名字)”
我还想在提交后打印控制台输入字段中的所有信息。
我怎样才能只使用 vanilla Javascript 来做到这一点？
function formValidation() {
if (document.myForm.fname.value == "") {
document.getElementById("first-name").style.border = "2px solid red";
return false;
} else {
document.getElementById("first-name").style.border = "";
};
if (document.myForm.lname.value == "") {
document.getElementById("last-name").style.border = "2px solid red";
return false;
} else {
document.getElementById("last-name").style.border = "";
};
var checkMale = document.getElementById("gender-m").checked;
var checkFemale = document.getElementById("gender-f").checked;
if (checkMale == false && checkFemale == false) {
alert("Please select gender");
return false;
};
if (document.myForm.texta.value == "") {
document.getElementById("area").style.border = "2px solid red";
return false;
} else {
document.getElementById("area").style.border = "";
};
return true;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>My Form</title>
</head>
<body>
<form id="my-form" name="myForm" action="#" onsubmit="event.preventDefault(); formValidation();">
<div id="msg">Thank you for contacting us, </div>
<input type="text" name="fname" id="first-name" placeholder="First Name"> <br>
<input type="text" name="lname" id="last-name" placeholder="Last Name"> <br>
<label for="gender">Gender:</label> <br>
<input type="radio" name="gender" id="gender-m"> Male <br>
<input type="radio" name="gender" id="gender-f"> Female <br>
<textarea name="texta" id="area" cols="30" rows="10"></textarea> <br>
<button type="submit">Submit</button>
</form>
<script src="index.js"></script>
</body>
</html>最佳答案
你可以这样做:
function formValidation() {
if (document.myForm.fname.value == "") {
document.getElementById("first-name").style.border = "2px solid red";
return false;
} else {
document.getElementById("first-name").style.border = "";
};
if (document.myForm.lname.value == "") {
document.getElementById("last-name").style.border = "2px solid red";
return false;
} else {
document.getElementById("last-name").style.border = "";
};
var checkMale = document.getElementById("gender-m").checked;
var checkFemale = document.getElementById("gender-f").checked;
if (checkMale == false && checkFemale == false) {
alert("Please select gender");
return false;
};
if (document.myForm.texta.value == "") {
document.getElementById("area").style.border = "2px solid red";
return false;
} else {
document.getElementById("area").style.border = "";
};
var success = true;
if(success){
var data = document.getElementById("first-name").value+','+document.getElementById("last-name").value;
console.log(data);
var html = '';
html +='Thank you for contacting us,'+document.getElementById("first-name").value;
document.getElementById("msg").innerHTML = html;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>My Form</title>
</head>
<body>
<form id="my-form" name="myForm" action="#" onsubmit="event.preventDefault(); formValidation();">
<div id="msg"></div>
<input type="text" name="fname" id="first-name" placeholder="First Name"> <br>
<input type="text" name="lname" id="last-name" placeholder="Last Name"> <br>
<label for="gender">Gender:</label> <br>
<input type="radio" name="gender" id="gender-m"> Male <br>
<input type="radio" name="gender" id="gender-f"> Female <br>
<textarea name="texta" id="area" cols="30" rows="10"></textarea> <br>
<button type="submit">Submit</button>
</form>
<script src="index.js"></script>
</body>
</html>当 formValidation() 函数中的所有内容都经过验证时，代码将设置标志 success = true。如果success的值为true，我们可以设置表单提交成功的消息。
关于javascript - 在 JavaScript 中验证后提交表单的确认消息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52575612/