<!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表单,并且当按下按钮时,它只会提示用户其表单已提交,并且实际上并没有将表单发送到任何地方。

最佳答案

您需要使用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>

关于javascript - 如何制作带有验证的JavaScript表单,提交后不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36379271/

10-15 00:54
查看更多