使用 jQuery 验证对多个字段进行远程验证答案

【问题标题】：Remote validation for multiple fields with jQuery validation使用 jQuery 验证对多个字段进行远程验证
【发布时间】：2017-12-04 15:16:26
【问题描述】：

我正在使用 jQuery 验证插件来检查用户是否存在于我的 SQL 数据库中。我想检查 checkCredentials.php 中的凭据。我的脚本会检查是否填写了电子邮件或密码，但它不会检查凭据是否存在于我的数据库中。谁能告诉我我做错了什么？提前致谢。

这是我的表格：

            <form action="php/login.php" method="post" id="loginForm" class="form-horizontal">
                <div class="form-group">
                    <input type="email" class="form-control form-control-lg" id="email" name="email" placeholder="Email" />
                </div>
                <div class="form-group">
                    <input type="password" class="form-control form-control-lg" id="password" name="password" placeholder="Wachtwoord" />
                </div>
                <button class="btn btn-block" type="submit" name="login" value="Login">Login</button>
            </form>

这是我的脚本：

    $( "#loginForm" ).validate( {
    rules: {
        email: {
            required: true,
            email: true
        },
        password: {
            required: true,
            remote: {
                url: "php/checkCredentials.php",
                type: "post",
                data: {
                    email: function () {
                        return $("#email").val();
                    }
                }
            }
        },
    },
    messages: {
        email: {
            required: "Vul alsjeblieft een e-mail adres in"
        },
        password: {
            required: "Vul alsjeblieft een wachtwoord in",
            remote: "E-mail of wachtwoord onjuist"
        },
    },

这是我的 PHP 文件 checkCredentials.php

<?php
require 'database-connection.php';

$email = mysqli_real_escape_string($_REQUEST['email']);
$password = mysqli_real_escape_string($_REQUEST['password']);

$query = "SELECT user_email, user_password FROM table_users WHERE user_email = '$email' AND user_password = '$password'";
$result = mysqli_query($db, $query);
if (mysqli_num_rows($result) == 0)
{
    echo 'true';
}
else
{
    echo 'false';
}
?>

【问题讨论】：

你没有散列你的密码？
@MattS 这只是为了测试它现在是否有效
打开浏览器的控制台，即在 chrome 中按 F12。然后访问网络，然后检查您的验证是否命中了正确的 url 路径。如果是，请使用exit() 进行一些调试以查看后端响应运行时。它将帮助您解决我认为的问题
检查$_REQUEST['password']是否在您的PHP文件中可用...
它确实命中了正确的 url 路径，我现在要调试看看有什么问题。感谢您的回答@hmd

标签： php jquery validation

【解决方案1】：

我把我的代码改成了这个，它现在可以工作了：

表格：

    <form action="php/login.php" method="post" id="loginForm" class="form-horizontal">
                    <div class="form-group">
                        <input type="email" class="form-control form-control-lg" id="email" name="email" placeholder="Email" />
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control form-control-lg" id="password" name="password" placeholder="Wachtwoord" />
                    </div>
                    <button class="btn btn-block" type="submit" name="login" value="Login">Login</button>
                </form>

脚本：

    $( "#loginForm" ).validate( {
        rules: {
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                remote: {
                    url: "php/checkCredentials.php",
                    type: "post",
                    data: {
                        email: function () {
                            return $("#email").val();
                        }
                    }
                }
            },
        },
        messages: {
            email: {
                required: "Vul alsjeblieft een e-mail adres in"
            },
            password: {
                required: "Vul alsjeblieft een wachtwoord in",
                remote: "E-mail of wachtwoord onjuist"
            },
        },
        errorElement: "em",
        errorPlacement: function ( error, element ) {
            error.addClass( "help-block" );


            element.parents( ".col-sm-5" ).addClass( "has-feedback" );

            if ( element.prop( "type" ) === "checkbox" ) {
                error.insertAfter( element.parent( "label" ) );
            } else {
                error.insertAfter( element );
            }

            if ( !element.next( "span" )[ 0 ] ) {
                $( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
            }
        },
        success: function ( label, element ) {
            if ( !$( element ).next( "span" )[ 0 ] ) {
                $( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
            }
        },
        highlight: function ( element, errorClass, validClass ) {
            $( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
            $( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
        },
        unhighlight: function ( element, errorClass, validClass ) {
            $( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
            $( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
        }
    } );

</script>

checkCredentials.php：

<?php
require 'database-connection.php';

$email = mysqli_real_escape_string($db, $_POST['email']);
$password = mysqli_real_escape_string($db, $_POST['password']);

$query = "SELECT user_email, user_password FROM table_users WHERE user_email = '$email' AND user_password = '$password'";
$result = mysqli_query($db, $query);
if (mysqli_num_rows($result) > 0)
{
    echo 'true';
}
else
{
    echo 'false';
}
?>

【讨论】：