使用$ _POST无法将我的表单（使用jQuery验证）提交到同一页面

Question

我有一个使用jQuery系统来验证输入的表单。 采用默认方式，如果没有错误，它将提交。 我对JavaScript非常不满意，所以我的问题是：

我如何将其提交到同一页面并将输入内容放入$_POST变量，以便它可以执行PHP代码来处理数据，同时使jQuery验证正常工作？

我注意到的是：

• 提交按钮的类型必须设置为type="button"才能使验证程序起作用
• 将类型设置为按钮，使<form>不可提交

PHP Snippet验证输入（查看它是否实际发布到$_POST变量中）：

if(isset($_POST)){
    $username = $_POST['username'];
    $email = $_POST['email'];
    $password = $_POST['password'];
    echo $username."<br>".$email."<br>".$password;
}

表单的脚本：

<form action="" method="post">
<table border=0 id="form" style="padding:10px;">
    <tr>
        <td>
            Username
        </td>
        <td align=left>
            <input name="username" type="text" size="20" jVal="{valid:function (val) { if (val.length < 3) return 'Invalid Name'; else return ''; }}">
        </td>
    </tr>
    <tr>
        <td>
            Email address
        </td>
        <td align=left>
            <input name="email" type="text" size="40" jVal="{valid:/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/, message:'Invalid Email Address'}" jValKey="{valid:/[a-zA-Z0-9._%+-@]/, cFunc:'alert', cArgs:['Email Address: '+$(this).val()]}">
        </td>
    </tr>
    <tr>
        <td>
            Password
        </td>
        <td align=left>
            <input name="password" id="password" type="password" jVal="{valid:function (val) { if (val.length < 4) return false; else return true; }, message:'Password of 4 or more characters required'}">
        </td>
    </tr>
    <tr>
        <td style="padding-right:20px;">
            Verify password
        </td>
        <td align=left>
            <input name="passwordconfirm" id="passwordVerify" type="password" jVal="{valid:function (val) { if ( val != eval('$(\'#password\').val()') ) return false; else return true; }, message:'Password and Verify Password Must Match'}">
        </td>
    </tr>
    <tr>
        <td>
            <input type="hidden" name="antispam" value="banana" />
            <script>
            var antiSpam = function() {
                if (document.getElementById("antiSpam")) {
                        a = document.getElementById("antiSpam");
                        if (isNaN(a.value) == true) {
                                a.value = 0;
                        } else {
                                a.value = parseInt(a.value) + 1;
                        }
                }
                setTimeout("antiSpam()", 1000);
            }
            antiSpam();
            </script>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input id="submitButton" type="button" value="Click here to register!" onClick="if ( $('#form').jVal({style:'blank',padding:8,border:0,wrap:false}) ){ this.form.submit;}">
        </td>
    </tr>
</table>
</form>

如果需要，可以在此处找到与jVal系统（验证）相对应的文件，但是很可能不需要它们。

提前谢谢

PS。 请不要说“缩小问题范围”，当我缩小范围并发布特定的代码片段时，被告知要发布整个代码，所以就在这里。

Answer 1

我如何将其提交到同一页面并将输入内容放入$ _POST变量，以便它可以执行PHP代码来处理数据，同时使jQuery验证正常工作？

您可以使用PHP_SELF发布到同一页面。 将ID从您的表格中移出并将其添加到表单中，并使用它在javascript代码中提交表单

<form id='form' action="<?php print $_SERVER['PHP_SELF'] ?>" method="post">
$('#form').submit() //instead of this.form.submit();

另外，应该使用isset($_POST)代替

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

}

Answer 2

1. 使用HTML5验证和<input>类型。 例如，您的浏览器比您可以更好地验证电子邮件地址。

2. 放弃垃圾邮件防护； 它将阻止实际用户使用您的页面。 使用reCAPTCHA 。

3. 不要使用表格进行布局。 请？ 至少要使用CSS而不是align属性。

4. 不要以为每个人的名字至少三个字符长。

<form method="POST">
    <table border="0" id="form" style="padding: 10px;">
        <tr>
            <td>
                Username
            </td>
            <td align="left">
                <input name="username" type="text" size="20" required />
            </td>
        </tr>
        <tr>
            <td>
                Email address
            </td>
            <td align="left">
                <input name="email" type="email" size="40" required />
            </td>
        </tr>
        <tr>
            <td>
                Password
            </td>
            <td align="left">
                <input name="password" id="password" type="password" required />
            </td>
        </tr>
        <tr>
            <td style="padding-right:20px;">
                Verify password
            </td>
            <td align="left">
                <input name="passwordconfirm" id="password-confirm" type="password" required />
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <button>Click here to register!</button>
            </td>
        </tr>
    </table>
</form>