Question

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("Name must be filled out");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="demo_form.asp"
onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

</body>
</html>

我目前正在尝试学习如何通过验证制作JavaScript表单，当按下按钮时，它只是提示用户他们的表单已提交，并且实际上并未将表单发送到任何地方。

Answer 1

您需要使用Event.preventDefault()

您可以详细了解here。在事件流的任何阶段调用preventDefault会取消事件，这意味着实现通常会因事件而采取的任何默认操作都不会发生。

使用两个输入框查看jsfiddle here。请注意<br>进行换行，将每个输入框放在一个新行上。

<script>
function validateForm(e) {
       e.preventDefault();
        var x = document.forms["myForm"]["fname"].value;
        if (x == null || x == "") {
            alert("Name must be filled out");
            return false;
        }
    }
</script>

<body>
   <form name="myForm" action="demo_form.asp"
       onsubmit="return validateForm(event)" method="post">
       Name: <input type="text" name="fname"><br>
       New TextBox: <input type="text" name="textBox"><br>
      <input type="submit" value="Submit">
   </form>
</body>

Answer 2

onclick事件将解析一个事件对象，如果你在处理函数中有一个参数，那么你可以这样做：

population * percentage / 100

所以基本上你可以在按下提交按钮之前或之后添加逻辑进行客户端验证并取消验证失败的事件，然后对用户感到生气。

如何通过验证制作JavaScript表单，并在提交时无处可寻

2 个答案: