当某个值不正确时，如何让我的用户保持在同一页面中

Question

所以，我正在尝试创建一个小脚本来检查用户填写的数据是否正确，但是我的问题是：即使它不正确，它也会抛出警报然后仍然重定向用户到将完成检查的页面（我想可能是因为我的表单字段的操作是将您发送到那里？）。我的问题：当弹出警告提示未正确填写某些内容时，如何让用户保持在同一页面中（也不会丢失输入字段的值）？

我的代码：

<?php
    if(!isset($_POST['submit'])) {
        header('Location: errorHandler.php');
        exit();
    } else {
            $email =$_POST['email'];
            $usrName =$_POST['userName'];
            $pwd =$_POST['password'];
            $pwdConfirm =$_POST['confirmPassword'];

        if ($email !== $email) {
            echo '<script language="javascript">';
                echo 'alert("It seems your email was not correct.")';
            echo '</script>';
        } else if ($usrName !== $usrName) {
            echo '<script language="javascript">';
                echo 'alert("It seems your username was not correct.")';
            echo '</script>';
        } else if ($pwd !== $pwdConfirm) {
            echo '<script language="javascript">';
                echo 'alert("it seems the passwords do NOT match")';
            echo '</script>';
        } else {
            include_once 'db.inc.php';

            $email = mysqli_real_escape_string ($conn, $_POST['email']);
            $usrName =  mysqli_real_escape_string ($conn, $_POST['userName']);
            $pwd =  mysqli_real_escape_string ($conn, $_POST['password']);
            $pwdConfirm =  mysqli_real_escape_string ($conn, $_POST['confirmPassword']);

            $sqli = "INSERT INTO logindb (email, name, password) VALUES ('$email', '$usrName', '$pwd')";

            mysqli_query($conn, $sqli);
        }
    }

如何创建输入字段：

function getEblock() {
    let eBlock = ($('<div/>', {
        'class': 'col-md-6 col-md-offset-3 well'
    }));
    return eBlock;
}

function getEmail() {
    let email = ($('<input/>', {
        'type': 'email',
        'name': 'email',
        'placeholder': 'Fill out your e-mail...',
        'required': true,
        'class': 'form form-control'
    }));
    return email;
}

function getUserName() {
    let userName = ($('<input/>', {
        'type': 'text',
        'name': 'userName',
        'placeholder': 'Fill out your username...',
        'required': true,
        'class': 'form form-control'
    }));
    return userName;
}

function getPassword() {
    let password = ($('<input/>', {
        'type': 'password',
        'name': 'password',
        'placeholder': 'Fill out your password...',
        'required': true,
        'class': 'form form-control'
    }));
    return password;
}

function getConfirmPassword() {
    let confirmPassword = ($('<input/>', {
        'type': 'password',
        'name': 'confirmPassword',
        'placeholder': 'Confirm your password...',
        'required': true,
        'class': 'form form-control'
    }));
    return confirmPassword;
}

function getConfirmBtn() {
    let submitBtn = ($('<button/>', {
        'type': 'submit',
        'name': 'submit',
        'class': 'btn btn-info',
        'id': 'submitBtn'
    })).text('Submit');

    return submitBtn;
}

是的，我知道我将所有内容插入数据库表的方式很糟糕，我知道我必须加密密码等，但现在我想知道如何防止用户（仍然）去@ 987654323@。由于输入字段等是由 javascript 制作的，因此我的 HTML 不会向您显示太多内容。

Answer 1

正如我的评论所述，您可以在将数据解析到其他页面之前进行一些基本的验证客户端。

如果您将用户输入值与其他变量（例如从数据库中提取的数据）进行比较，您可以在其他页面上进行双重验证。

在我的示例中，我通常会使用 jQuery 表示法和 AJAX。

客户端验证的基本标记：

function validate() {
    var email = $("[name='email']").val();
    var userName = $("[name='userName']").val();
    var password = $("[name='password']").val();
    var confirmPassword = $("[name='confirmPassword']").val();

    var result = true;

    if(/* some E-mail validation */) {
        result = false;
    }

    if(/* some userName validation */) {
        result = false;
    }

    if(/* some password validation */) {
        result = false;
    }

    if(/* some confirmPassword validation */) {
        result = false;
    }

    return result;
}

还有你的 AJAX 函数：

function submitForm() {
    if( validate() ) {
        $.ajax({
            type : "POST",
            url : "/your_page.php",
            data : {
                submit: "1",
                email: $("[name='email']").val(),
                userName: $("[name='userName']").val(),
                password: $("[name='password']").val(),
                confirmPassword: $("[name='confirmPassword']").val()
            },
            success: function (html) {
                //do something on success
                if( html.includes('emailError') ) {
                    alert("It seems your email was not correct.");
                }
                else if( html.includes('userNameError') ) {
                    alert("It seems your username was not correct.");
                }
                else if( html.includes('passwordConfirmError') ) {
                    alert("it seems the passwords do NOT match")
                }
                else {
                    window.location.href = "/your_redirect_page.php";
                }
            }
        })
    }
}

本例中的 AJAX 函数被封装在另一个我选择命名为 submitForm() 的函数中。您可以使用 onclick 通过按钮调用该函数。

例子：

<button onclick="submitForm();">Click to submit</button>

我会稍微解释一下AJAX函数中的成功函数。这基本上是一个围绕您正在执行的服务器端验证的逻辑。

带有验证的 PHP 页面：

if($_POST['submit'] != "") {
    $email = $_POST['email'];
    $usrName = $_POST['userName'];
    $pwd = $_POST['password'];
    $pwdConfirm = $_POST['confirmPassword'];

    if($email !== $email) {
        echo 'emailError';
    }
    else if($usrName !== $usrName) {
        echo 'userNameError';
    }
    else if($pwd !== $pwdConfirm) {
            echo 'passwordConfirmError';
    }
    else {
        include_once 'db.inc.php';

        $email = mysqli_real_escape_string ($conn, $_POST['email']);
        $usrName =  mysqli_real_escape_string ($conn, $_POST['userName']);
        $pwd =  mysqli_real_escape_string ($conn, $_POST['password']);
        $pwdConfirm =  mysqli_real_escape_string ($conn, $_POST['confirmPassword']);

        $sqli = "INSERT INTO logindb (email, name, password) VALUES ('$email', '$usrName', '$pwd')";

        mysqli_query($conn, $sqli);
    }
}

如果您查看 PHP 代码的验证，您会发现我根据验证选择回显字符串。我们的 AJAX 成功函数主要检查 HTML 是否包含任何这些字符串，并据此抛出错误消息。如果一切正常，它会继续做数据库逻辑，并重定向到另一个页面。

现在，一些代码主要是为了让您理解而进行的标记，实际上在逻辑上并不适用，因为我们在某些情况下将确切相同的变量相互比较。但是，它应该足以让您大致了解如何实施功能解决方案。