Question

大约2周前，我开始学习javascript，所以我真的很新。我一直在用表格弄乱周围的东西，我无法弄清楚一些东西。

我用HTML制作了一个表单，并希望用Javascript进行验证。

到目前为止我所做的：

如果字段为空并且用户按下提交，则该字段周围将出现一个红色边框。如果用户在字段中写东西，则边框会消失。

我想做什么：

如果没有验证错误并且提交了表单，我希望确认消息出现在表单上方。该消息最初应被隐藏，并应显示类似以下内容：“感谢您与我们联系（以及用户在表单中输入的名字）”

我还想在提交后从控制台的输入字段中打印所有信息。

我该如何仅使用原始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>

Answer 1

您可以这样：

var checkExist = setInterval(function() {
    var life = 300;
    var games = Game.currentGame.ui.playerPetTick.health;
    if (games < life) {
        console.log("It exists")
        clearInterval(checkExist);
    }
}, 100); // check every 100ms

var target = Game.currentGame.ui.playerPetTick.health;

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.info("It exists");
    });    
});

var config = { attributes: true, childList: true, characterData: true };

observer.observe(target, config);

当formValidation（）函数中的所有内容都经过验证后，代码将设置标志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>的值为success = true，我们可以设置一个表单提交成功消息。

JavaScript验证后提交表单的确认消息

1 个答案: