Keyup事件下用户名校验异常：提示显示错误与isUsernameUnique值未更新的解决方法

嘿，我一眼就瞅出你代码里的几个小bug，这就是为啥你明明输入了合法用户名，却还是显示错误提示、变量也没正确更新的原因！咱们一步步来解决：

核心问题拆解 #

1. 代码块范围错误：在#username的keyup事件里，你的else分支没有用大括号包裹，导致不管用户名是不是在禁用列表里，最后都会执行isUsernameUnique = true——这就等于这个变量永远是true，完全起不到标记唯一性的作用！
2. 逻辑颠倒：你在按钮点击事件里判断isUsernameUnique == true的时候，弹出“用户名已存在”的提示，这逻辑完全搞反了啊！isUsernameUnique这个变量名的意思是“用户名是否唯一”，true应该代表可用，false才是已存在的情况。
3. 按钮状态控制混乱：现在的按钮启用/禁用逻辑分散在多个if语句里，很容易互相覆盖，应该把所有校验条件整合起来统一判断。

修复后的完整代码 #

JavaScript部分 #

// 封装按钮状态更新函数，方便复用
function updateNextButtonState() {
    let year = $("#year").val().trim();
    let email = $("#email").val().trim();
    let username = $("#username").val().trim();
    // 所有必填项不为空 + 用户名唯一，才启用按钮
    let isAllValid = year !== "" && email !== "" && username !== "" && isUsernameUnique;
    $('#nextButton').prop('disabled', !isAllValid);
}

$(document).ready(function() {
    let isUsernameUnique = false;
    // 页面加载时先初始化按钮状态
    updateNextButtonState();

    $('#nextButton').click(function(e) {
        e.preventDefault();
        let year = $("#year").val().trim();
        let email = $("#email").val().trim();
        let username = $("#username").val().trim();

        // 先校验必填项是否填全
        if (year === "" || email === "" || username === "") {
            Swal.fire({ icon: "warning", text: 'Please fill in all the information !' });
            return; // 直接返回，不执行后续逻辑
        }

        // 再校验用户名是否唯一
        if (!isUsernameUnique) {
            Swal.fire({ icon: "warning", text: 'Sorry this username already exists' });
            return;
        }

        // 所有校验通过，这里可以写下一步的逻辑（比如提交表单、跳转页面）
        Swal.fire({ icon: "success", text: 'All information is valid! Proceeding...' });
    });

    // 监听年份和邮箱输入框的变化，实时更新按钮状态
    $('#year, #email').on('input', function() {
        updateNextButtonState();
    });

    $('#username').keyup(function() {
        // 自动转小写并同步回输入框，同时获取处理后的值
        let checkUsername = $(this).val($(this).val().toLowerCase()).val();
        // 用数组includes方法更简洁地判断是否在禁用列表
        if (['cindy90', 'lilycollin', 'adrian98'].includes(checkUsername)) {
            $('#usernameValid').html(`<span style="color:red;"><b> (Invalid )</b></span>`);
            isUsernameUnique = false; // 用户名已存在，标记为不唯一
        } else {
            $('#usernameValid').html(`<span style="color:green;"><b> (Valid) </b></span>`);
            isUsernameUnique = true; // 用户名可用，标记为唯一
        }
        // 每次输入后更新按钮状态
        updateNextButtonState();
    });
});

HTML部分（修正了一个小拼写错误） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<div class="col-lg-6 mb-30 ">
    <label><b><span style="color:#e60000;">*</span> Username</b> <span id="usernameValid"></span></label><br>
    <div class="input-group-prepend">
        <!-- 修正了class拼写错误：from-control → form-control -->
        <input class="form-control" type="text" id="username" onkeypress="return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 48 && event.charCode <= 57) || (event.charCode >= 97 && event.charCode <= 122) && (event.charCode != 32))">
    </div>
</div>

<div class="col-lg-6 mb-30 ">
    <label><b><span style="color:#e60000;">*</span> Year</b></label><br>
    <div class="input-group-prepend">
        <input class="form-control" type="text" id="year">
    </div>
</div>

<div class="col-lg-6 mb-30 ">
    <label><b><span style="color:#e60000;">*</span> Email</b></label><br>
    <div class="input-group-prepend">
        <input class="form-control" type="email" id="email">
    </div>
</div>

<button id="nextButton">Next</button>

额外优化点说明 #

• 把按钮状态判断抽成了单独的函数updateNextButtonState，不管哪个输入框变化，都能统一更新按钮状态，避免逻辑重复。
• 用trim()处理输入值，避免用户输入空格导致的空值判断错误。
• 用数组的includes()方法替代多个||判断，代码更简洁易维护。
• 修正了HTML中输入框的class拼写错误（from-control → form-control），避免样式失效。

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