好吧，我想做的是几件事:
- 如果任何字段为空，请在表单上方列出错误
- 如果空白，则以红色突出显示
- 一旦用户尝试修复它，即填充空白字段，红色突出显示就会消失......就像您在焦点模糊时这样做吗？
(而且我是一个 JS 新手，所以我仍然在努力如何实现一个函数来完成这一切......你确实使用了一个函数，对吗？
这是我的早期形式...我真的很难实现上面列出的这三个特征...我如何在下面的代码中实现这些特征？提前致谢。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Testy Form</title>
</head>
<body>
<h4>Learning to Validate Forms</h4>
<div id="validationErrors"></div>
<form action="" method="post" id="testyForm">
<label>Name
<input type="text" name="name" value="" id="name">
</label>
<br /><br />
<label>Email
<input type="text" name="email" value="" id="email">
</label>
<br /><br />
<input type="submit" value="Submit">
</form>
<script>
var formy = document.getElementById('testyForm');
var required_inputs = ['name', 'email'];
formy.onsubmit = function(event) {
for (var i = 0; i < required_inputs.length; i++) {
var input = this[required_inputs[i]];
if (input.value.length == 0) {
event.preventDefault();
input.style.border = "1px solid red";
input.style.backgroundColor = "#FFCCCC";
}
}
}
</script>
</body>
</html>
最佳答案
如果您只是想让事情正常工作，我建议使用验证库而不是编写自己的库。
如果您正在学习 Javascript，那么您的代码中存在以下错误:
更新
var input = this[required_inputs[i]];
至
var input = document.getElementById(required_inputs[i]);
编辑 - 解释
您将 required_inputs 声明为数组:
var required_inputs = ['name', 'email'];
当你循环遍历它时，required_inputs[i]将返回'name'和'email'，以便可以用作getElementById() 的参数。
关于javascript - 如何使用 javascript 验证简单的表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46086704/