如何限制输入框仅输入字母和单个连续下划线？现有JS代码失效求助

原代码的问题分析 #

1. 事件时机错误：onkeydown触发时，输入的字符还没写入输入框，此时用当前value校验完全不匹配实际场景。比如第一次输入字母时，value是空字符串，正则会返回false，直接阻止输入，导致根本没法输入第一个字符。
2. 未放行控制键：删除、退格、箭头键这些编辑必需的控制键也会被拦截，输入框没法正常编辑。
3. 粘贴事件逻辑失效：粘贴时没有获取粘贴的内容，只用当前value校验，完全没法判断粘贴后的内容是否合法。

修正后的代码实现 #

var nick = document.getElementById('donate-nickname');

// 校验字符串是否符合规则：空字符串或首字母+字母/下划线
function isNickValid(str) {
    return /^$|^[a-zA-Z][a-zA-Z_]*$/.test(str);
}

// 处理键盘输入
function handleKeyDown(evt) {
    // 放行控制键：删除、退格、箭头键、Tab等
    const allowedControlKeys = [8, 9, 37, 38, 39, 40, 46];
    if (allowedControlKeys.includes(evt.keyCode)) {
        return;
    }

    // 只允许输入字母或下划线，其他字符直接拦截
    const inputChar = evt.key;
    if (!/^[a-zA-Z_]$/.test(inputChar)) {
        evt.preventDefault();
        return;
    }

    // 预判输入后的完整内容
    const startPos = nick.selectionStart;
    const endPos = nick.selectionEnd;
    const newValue = nick.value.slice(0, startPos) + inputChar + nick.value.slice(endPos);
    
    if (!isNickValid(newValue)) {
        evt.preventDefault();
    }
}

// 处理粘贴操作
function handlePaste(evt) {
    const pasteContent = evt.clipboardData.getData('text');
    const startPos = nick.selectionStart;
    const endPos = nick.selectionEnd;
    const newValue = nick.value.slice(0, startPos) + pasteContent + nick.value.slice(endPos);
    
    if (!isNickValid(newValue)) {
        evt.preventDefault();
    }
}

// 处理输入事件（防止控制台修改value）
function handleInput() {
    if (!isNickValid(this.value)) {
        this.value = this.dataset.lastValid || '';
    } else {
        this.dataset.lastValid = this.value;
    }
}

// 绑定事件
nick.addEventListener('keydown', handleKeyDown);
nick.addEventListener('paste', handlePaste);
nick.addEventListener('input', handleInput);

// 初始化合法内容缓存
nick.dataset.lastValid = nick.value;

代码关键说明 #

• isNickValid函数允许空字符串，确保用户刚开始输入时不会被拦截，同时严格校验符合规则的内容。
• 键盘事件中先放行控制键，保证正常编辑；再限制输入字符类型，最后预判输入后的完整内容是否合法，避免中途输入非法字符。
• 粘贴事件直接获取粘贴内容，生成完整的目标内容后校验，彻底拦截非法粘贴。
• 添加input事件，防止用户通过浏览器控制台等方式修改输入框内容，确保内容始终符合规则。

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