javascript - 单击“提交”后客户端表单验证

Question

我有 2 个 php 文件“source.php”和“target.php”。在我的 source.php 部分中，

<form method="POST" id="form1" action="target.php">
...
<input type="submit" name="submit" value="Submit"/>
</form>

当我单击“提交”时，它会转到“target.php”(即使表单中有错误)，但我希望只有在验证所有表单字段后，它才会转到目标页面，否则它显示某种警告消息并停留在同一页面上。请帮忙!也许这对某些人来说是一个愚蠢的问题，但我是初学者。 (我知道如何进行所有现场验证及其工作正常)。

Answer 1

重复问题重复。下次发帖前请仔细搜索。

通常使用 javascript 进行验证。但是在某些情况下 javascript 效率较低，例如当您需要验证国家及其州时。将国家和州的完整列表发送给客户端是不切实际的。在这种情况下使用 AJAX。通过使用 AJAX，客户端在用户输入后立即将数据发送到服务器。然后它仅获取所需的数据。它是客户端和服务器之间的同步双向通信。例如，如果用户输入国家/地区名称为INDIA，使用AJAX加载INDIA的状态进行验证，从而节省带宽。JavaScript 和 AJAX 并不容易学习，你必须研究尝试并纠正不同的代码。只需谷歌“JavaScript 表单验证”...

这是来自 w3Schools...

必填字段下面的函数检查字段是否为空。如果该字段为空，则警告框会发出警告消息，函数返回 false，并且不会提交表单:

function validateForm()
{
    var x=document.forms["myForm"]["fname"].value;
    if (x==null || x=="")
    {
       alert("First name must be filled out");
       return false;
    }
}

上面的函数可以在提交表单时调用:

示例

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

这里有更多基本示例 http://www.w3schools.com/js/js_form_validation.asp

祝你好运