Javascript 在按钮onclick事件之前验证表单数据_Javascript_Php_Html_Validation_Onclick

Javascript 在按钮onclick事件之前验证表单数据

javascript php html validation

Javascript 在按钮onclick事件之前验证表单数据,javascript,php,html,validation,onclick,Javascript,Php,Html,Validation,Onclick,我真的被这件事难住了我有一个发送电子邮件的表单，因此输入必须经过验证。我得到了一些工作方法来验证输入，mail（）函数也可以工作，与delete和send按钮相同我的问题是，如果单击“发送”按钮，它应该首先验证数据（或无效时打印错误），然后显示确认弹出窗口，如果用户真的想发送邮件我不知道如何完成下面是我的片段将表单值分配给变量并验证输入（我只向您展示电子邮件验证，否则截取的太长，所有验证都可以正常工作）最简单的解决方案是使用基于浏览器的字段验证。要做到这一点，只需更改接收电子邮件的字

我真的被这件事难住了

我有一个发送电子邮件的表单，因此输入必须经过验证。我得到了一些工作方法来验证输入，mail（）函数也可以工作，与delete和send按钮相同

我的问题是，如果单击“发送”按钮，它应该首先验证数据（或无效时打印错误），然后显示确认弹出窗口，如果用户真的想发送邮件

我不知道如何完成

下面是我的片段

将表单值分配给变量并验证输入（我只向您展示电子邮件验证，否则截取的太长，所有验证都可以正常工作）

最简单的解决方案是使用基于浏览器的字段验证。
要做到这一点，只需更改接收电子邮件的字段类型即可（前提是您只需要支持现代浏览器）



但是一个更漂亮的解决方案是使用Ajax。
试试下面的代码
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form action="" id="req_form" method="POST">
<p>Your name: <input type="text" name="email_address" id="email_address" value="" /></p>
<button type="button" name="submit" value="submit" onclick="Process_form();">Senden</button>
</form>
</body>
</html>




<script>

function Process_form()
{

    if($("#email_address").val()=='')
    {
        alert('Enter Email');
    }
    else
    {
        var vali = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        if (vali.test($("#email_address")) == false) 
        {
            alert('Invalid Email Address');

        }
        else
        {
            var r = confirm("Press a button!");
            if (r == true) {
                $( "#req_form" ).submit();
            } 
        }
    }

}
</script>


您的姓名：
森登
函数过程_form（）
{
如果（$（“#电子邮件地址”）.val（）=''）
{
警报（“输入电子邮件”）；
}
其他的
{
var vali=/^（[A-Za-z0-9\-\.]）+\@（[A-Za-z0-9\-\.]）+\.（[A-Za-z]{2,4}）$/；
如果（有效性测试（$（“#电子邮件地址”）==false）
{
警报（“无效电子邮件地址”）；
}
其他的
{
var r=确认（“按下按钮！”）；
如果（r==true）{
$（“#申请表”）.submit（）；
} 
}
}
}
您当前的数据验证发生在服务器端，因此您只能在结果页面上输出确认弹出窗口。如果您想在同一页面上弹出确认窗口，您需要先切换到客户端验证或通过AJAX提交数据进行验证。@misorude客户端验证是什么样子？一般来说，这个问题太宽泛了。正如@onovikov在他们的回答中所建议的那样，如果您只需要确保使用了有效的电子邮件地址，您可以使用HTML5email字段类型，然后您就已经获得了对特定方面“内置”的验证。我尝试了这个方法，但它只会检查字段是否为空，这不是检查valide电子邮件…我真的很欣赏你的努力，并愿意接受它作为答案，但我尝试了它abc@example.com它将返回无效：(
 <button type="submit" name="submit" value="submit" onclick="if(!window.confirm('Jetzt senden?')) return false;">
    Senden
</button>

<input type = "email" name = "email" placeholder = "E-Mail" />

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form action="" id="req_form" method="POST">
<p>Your name: <input type="text" name="email_address" id="email_address" value="" /></p>
<button type="button" name="submit" value="submit" onclick="Process_form();">Senden</button>
</form>
</body>
</html>




<script>

function Process_form()
{

    if($("#email_address").val()=='')
    {
        alert('Enter Email');
    }
    else
    {
        var vali = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        if (vali.test($("#email_address")) == false) 
        {
            alert('Invalid Email Address');

        }
        else
        {
            var r = confirm("Press a button!");
            if (r == true) {
                $( "#req_form" ).submit();
            } 
        }
    }

}
</script>