javascript - 当用户输入无效的表单输入时如何避免页面刷新

Question

我的网站上有一个简单的“联系我”部分，我正在尝试弄清楚如何在用户输入无效电子邮件时阻止页面刷新。我之所以要阻止这种情况，是因为当他们输入无效电子邮件时，页面会刷新并将它们带到页面顶部。我有一个错误显示用户错过了什么，但他们必须向下滚动到联系人部分才能看到它。我不确定如何防止页面在提交后滚动到顶部。我现在所拥有的只是一个简单的 php 表单验证。有什么建议么？这会用 JavaScript 完成吗？或者我可以将它添加到我现有的 php 验证脚本中吗？不知道从哪里开始。谢谢!

旁注我正在使用 PHP 进行表单验证。

已修复!为了防止页面返回顶部，我从表单操作中删除了 "index.php":

之前

<form action="index.php" method="POST">

之后

<form action="" method="POST">

现在页面不会刷新，也不会转到页面顶部。

Answer 1

这取决于您所说的无效电子邮件的含义。如果您指的是格式，那么您应该使用类似这样的格式，浏览器将为您检查电子邮件。

        <label for='idEmail' class="required">Your email address</label>
        <input type='email' name='inpEmail' id='idEmail' class='full_width'
         maxlength='100' autocomplete='email' value=''>

关键是将输入设为 email