JavaScript自定义验证不起作用

这是我的密码：

<script type="text/javascript">
    function submitform() {
        if(document.getElementById('name').value=='') {
            alert('Please enter a name');
            return false;
        }
    }
</script>
<form action="mail.php" method="post" onsubmit="submitform();">
    <input type="text" id="name" name="name" placeholder="name">
    <input type="submit" value="submit">
</form>

函数submitform（）{
if（document.getElementById（'name'）。value=''）{
警报（“请输入名称”）；
返回false；
}
}

正如预期的那样，表单在提交时应该调用submitform函数，如果name字段为空，它应该返回false并发出警报。 但是，它只是通过。

---

有什么解释吗？

您需要用return调用函数，这样false值就可以防止默认操作（表单提交）

---

你需要停一下

您可以使用onSubmit，但最好删除您的输入submit并放置一个按钮。 然后点击按钮，你可以做你想做的事情，并最终提交表格

表格：

---

您可以使用jquery而不是javascript来进行这种验证，这将非常容易实现

<form action="mail.php" method="post">
  <input type="text" id="name" name="name" placeholder="name">
  <input type="submit" value="submit" id="submit">
</form>

<script>
   $(document).ready(function(){
     $("#submit").click(fucntion(e){
        if($("#name").val() == ""){
       alert("Name is empty");
       e.preventDefault();
     }
     });
   });
</script>

$（文档）.ready（函数（）{
$（“#提交”）。单击（功能（e）{
如果（$（“#名称”）.val（）=“”）{
警报（“名称为空”）；
e、 预防默认值（）；
}
});
});

---

不要忘记在脚本标记之前添加jquery库。

您需要更改

onSubmit

属性，如下所示

onsubmit="return submitform();"

因此，您的html如下所示

函数提交表单（事件）{
if（document.getElementById（'name'）。value=''）{
警报（“请输入名称”）；
event.preventDefault（）；
返回false；
}
}

您需要防止默认提交。在JS中，return false不会停止“submit”函数的传播（框架可以不同）

我建议你阅读：

试试这个脚本

function submitform() {
    var x = document.forms["fname"].value;
    x = x.trim(); // Remove white spaces
    if (x==null || x=="") {
        alert("First name must be filled out");
        return false;
    }
}

---

要取消提交，侦听器需要返回true或false。此外，如果函数验证字段，那么最好根据它所做的事情来命名，而不是在它执行操作时，因此将其称为“validateForm”

另外，将控件的名称命名为“name”会屏蔽窗体自己的name属性。虽然这在这里并不重要，但一般来说，给任何表单控件一个与表单的标准属性相同的名称（例如“submit”或“reset”）都不是一个好主意

所以你可能会得到这样的结果：

<script>
    function validateForm(form) {
        if (form.personName.value == '') {
            alert('Please enter a name');
            return false;
        }
    }
</script>

<form ... onsubmit="return validateForm(this);">
    <input type="text" name="personName">
    <input type="submit">
</form>

函数validateForm（表单）{
if（form.personName.value==''）{
警报（“请输入名称”）；
返回false；
}
}

这是正确的方法，确保正确刷新并清除缓存这是一种解决方案。但是我需要知道为什么javascript不起作用！您编写的函数返回一个值，但您不让窗体知道返回的内容，因此默认情况下它理解为true。因此，您需要将表单onsubmit更改为onsubmit=“return submitform（）；”，这样表单将从函数中获取值，如果为false，则不会提交。jQuery是javascript。您已经成功地用更多的jQuery替换了普通JS（不包括jQuery本身的数千行）。酷。@RobG是的，我用jquery取代了普通的JS，因为它易于使用，而且使用起来也不太复杂。我理解你关于jquery库的话，有数千行代码。但据我所知，jquery库经过了大量优化，加载不会花费太多时间，这会妨碍页面加载时间。将侦听器置于按钮上是一个糟糕的解决方案。更普遍的建议是（出于充分的理由）将提交验证侦听器放在表单上。@RobG为什么这是一个糟糕的解决方案，建议在哪里使用？原因是什么？没有一个看起来像我的答案。我首先被发布了解决方案：）

onsubmit="return submitform();"

<form action="mail.php" method="post" onsubmit="return submitform();">
    <input type="text" id="name" name="name" placeholder="name">
    <input type="submit" value="submit">
</form>

<script type="text/javascript">
    function submitform(event) {
        if(document.getElementById('name').value=='') {
            alert('Please enter a name');
             event.preventDefault();
            return false;
        }
    }
</script>

<form action="mail.php" method="post" onsubmit="submitform(event);">
    <input type="text" id="name" name="name" placeholder="name">
    <input type="submit" value="submit">
</form>

function submitform() {
    var x = document.forms["fname"].value;
    x = x.trim(); // Remove white spaces
    if (x==null || x=="") {
        alert("First name must be filled out");
        return false;
    }
}

<script>
    function validateForm(form) {
        if (form.personName.value == '') {
            alert('Please enter a name');
            return false;
        }
    }
</script>

<form ... onsubmit="return validateForm(this);">
    <input type="text" name="personName">
    <input type="submit">
</form>