如何在Laravel+JS+AJAX中检测用户名存在时隐藏表单提交按钮？

嘿，我来帮你搞定这个需求！你已经完成了用户名检测的核心逻辑，只需要在现有代码基础上添加一点控制提交按钮显示/隐藏的逻辑就可以了，步骤很简单：

第一步：给提交按钮添加ID #

首先给你的提交按钮加一个唯一ID，这样JS能精准定位到它，同时还要修正HTML里的函数名（原来的checkem和JS里定义的get_user_name不匹配，会报错）：

<span id="username_rs" style="color: green; font-weight: bold"></span>
<input id="username" name="username" onchange="get_user_name('#username', '#username_rs')">
<button id="submitBtn" type="submit" class="btn btn-primary">{{ __('Register') }}</button>

第二步：修改JS函数，添加按钮控制逻辑 #

在你的get_user_name函数里，获取到后端返回的结果后，判断如果是“username already taken”就隐藏按钮，否则显示按钮。同时处理用户名清空的情况，避免按钮一直隐藏：

<script>
function get_user_name(id, result) {
    var username = $(id).val();
    // 清空之前的提示信息
    $(result).html('');
    
    // 如果用户清空了用户名，直接显示提交按钮
    if (!username) {
        $('#submitBtn').show();
        return;
    }

    $.get("<?php echo e(url('home/get_user_name')); ?>/" + username, function (data) {
        $(result).html(data);
        
        // 根据返回的内容判断是否隐藏按钮
        if (data.trim() === "username already taken") {
            $('#submitBtn').hide();
        } else {
            $('#submitBtn').show();
        }
    });
}
</script>

第三步：优化Controller（可选，提升用户体验） #

你当前的Controller在用户名可用时没有返回任何内容，建议返回友好提示，让用户明确知道用户名可以使用：

public function get_user_name($username) {
    $userCount = DB::table('users')
        ->where('username', $username)
        ->count();
    
    if ($userCount > 0) {
        return "username already taken";
    } else {
        return "username available"; // 给用户明确的可用提示
    }
}

额外说明 #

• 使用trim()是为了避免后端返回的内容带有空格，导致判断不准确。
• 初始状态下提交按钮是显示的，只有当检测到用户名已被占用时才会隐藏。

内容的提问来源于stack exchange，提问作者ppegu