php - 如果用户名存在于 mysql 数据库中，则拒绝提交表单

Question

我刚刚插入了一个 JQuery username check，它工作正常，问题是我的表单仍在提交，即使用户名存在于我的 Mysq 数据库 中，我该如何配置它拒绝提交到我的服务器端 .php 文件(如果存在)？

这是我的 Jquery 插件 javascript 代码

  $(document).ready(function() {


        //the min chars for checkusername
        var min_chars = 3;

        //result texts
        var characters_error = 'Minimum amount of chars is 3';
        var checking_html = '<img src="images/checkusername.gif" /> Checking...';

        //when button is clicked
        $('#check_checkusername_availability').click(function(){
            //run the character number check
            if($('#checkusername').val().length < min_chars){
                //if it's bellow the minimum show characters_error text
                $('#checkusername_availability_result').html(characters_error);
            }else{          
                //else show the cheking_text and run the function to check
                $('#checkusername_availability_result').html(checking_html);
                check_availability();
            }
        });


  });

//function to check checkusername availability  
function check_availability(){

        //get the checkusername
        var checkusername = $('#checkusername').val();

        //use ajax to run the check
        $.post("frontend/functions/f_checkuser.php", { checkusername: checkusername },
            function(result){       
                //if the result is 1
                if(result == 1){
                    //show that the checkusername is available
                    $('#checkusername_availability_result').html('<span class="is_available"><b>' +checkusername + '</b> is Available</span>');
                }else{
                    //show that the checkusername is NOT available
                    $('#checkusername_availability_result').html('<span class="is_not_available"><b>' +checkusername + '</b> is not Available</span>');
                }
        });

} 

这是我的html字段

 <table border="0" >
          <tr>
            <td valign="middle"><input class="input_field_12em required userUserName" name="userUserName" id="checkusername"></td>
            <td valign="middle"><input type='button' id='check_checkusername_availability' value='Check Availability'></td>
            <td><div id='checkusername_availability_result'></div></td>
          </tr>
        </table>

Answer 1

您可以等待回调触发您的 AJAX 请求，然后您可以提交或不提交表单:

$(function () {
    $('form').on('submit', function (event, extra) {
        if (typeof extra == 'undefined') {
            extra = false;
        }
        //if no extra argument is passed via `.trigger()` then don't submit the form
        return extra;
    });
    $('#check_checkusername_availability').on('click', function () {
        $.ajax({
            url : 'frontend/functions/f_checkuser.php',
            type : 'post',
            data : { checkusername : $('#checkusername').val() },
            success : function (serverResponse) {
                //now check the serverResponse variable to see if the name exists, if not then run this code:
                $('form').trigger('submit', true);
            },
            error   : function (jqXHR, textStatus, errorThrown) { /*don't forget to handle possible errors*/ }
        });
    });
});

否则，您可以通过设置 async:false 强制 AJAX 请求同步，但这将锁定浏览器，直到 AJAX 请求解析为止，这可能是用户无法处理的秒数。不要做任何事。这给用户的印象是您的脚本已损坏。