如何使用 Ajax 在页面上显示 PHP 服务器端验证消息

我对Bootstrap和Ajax完全陌生。我在下面提到了 2 个查询。请帮助解决这些疑问。

1(如果我没有在登录ID文本框中输入任何信息，那么它就会向我显示js错误。但是当我输入无效的登录ID并提交表单时，它不会在PHP进程页面(p_reg_p.php(上显示服务器端错误消息。

那么我需要在 Ajax 代码中做哪些更改才能在表单页面上显示服务器端验证消息(注册.php(

注意：我已从注册页面中删除了所有其他字段，以使其更易于阅读和缩短。此外，表单已提交，数据已插入数据库表，没有任何问题，因此功能对我来说工作正常。

2(我将在同一页面上提供注册和登录表格。那么我需要考虑在注册.php和注册.js页面上的事项，以便两种形式都能正常工作而不受任何干扰。

输入表单页面(注册.php(

<script src="./register.js"></script>
<div class="row">
    <div class="col-md-12">
        <h3>Register</h3>
        <form name="sentMessage" id="FormPRegister" novalidate>
            <div class="control-group form-group">
                <div class="controls">
                    <label>Login ID:</label>
                    <input type="text" class="form-control" id="r_loginid" required data-validation-required-message="Please enter login id.">
                    <p class="help-block"></p>
                </div>
            </div>
            <div id="success"></div>
            <!-- For success/fail messages -->
            <button type="submit" class="btn btn-primary">Send Message</button>
            <br/><br/>
        </form>
    </div>
</div>

Ajax 验证页(注册.js(

$(function() {
    $("#FormPRegister input,#FormPRegister textarea ,#FormPRegister select").jqBootstrapValidation({
    preventSubmit: true,
    submitError: function($form, event, errors) {
        // something to have when submit produces an error ?
        // Not decided if I need it yet
    },
    submitSuccess: function($form, event) {
        event.preventDefault(); // prevent default submit behaviour
        // get values from FORM
        var r_loginid = $("input#r_loginid").val();
        $.ajax({
            url: "./user/p_reg_p.php",
            type: "POST",
            data: {
                r_loginid: r_loginid,
            },
            cache: false,
            success: function() {
                // Success message
                $('#success').html("<div class='alert alert-success'>");
                $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-success')
                    .append("<strong>Success Message will come here.</strong>");
                $('#success > .alert-success')
                    .append('</div>');
                //clear all fields
                $('#FormPRegister').trigger("reset");
            },
            error: function() {
                // Fail message
                $('#success').html("<div class='alert alert-danger'>");
                $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-danger').append("<strong>Sorry " + " Error Message will come here!");
                $('#success > .alert-danger').append('</div>');
                //clear all fields
                $('#FormPRegister').trigger("reset");
            },
        })
    },
    filter: function() {
        return $(this).is(":visible");
    },
});
$("a[data-toggle='"tab'"]").click(function(e) {
    e.preventDefault();
    $(this).tab("show");
});
});

/*When clicking on Full hide fail/success boxes */
$('#r_name').focus(function() {
    $('#success').html('');
});

进程页 (p_reg_p.php(

if( IsvalidLoginID($_POST["r_loginid"]) )
{
    echo "Invalid Login ID! Use only Alpha-Numerics!";
    return false;
}

 <input type="text" class="form-control" id="r_loginid" required data-validation-required-message="Please enter login id.">

 <input type="text" class="form-control" id="r_loginid" name="r_loginid" required data-validation-required-message="Please enter login id.">