JQuery keyup事件无法检测Alt+数字输入码生成的特殊字符问题

• 现象：用Alt+64组合键输入@时，输入框已显示@，但keyup事件中获取的输入值里没有该字符，必须再按一次其他按键，才能捕获到完整的Jhon000@。
• 原因：keyup事件在按键松开时触发，而Alt+数字键这类组合键输入的字符，浏览器会在组合键操作完全结束后才插入输入框。此时触发的keyup事件对应的是Alt键的松开动作，输入框内容尚未更新，所以获取到的是插入前的旧值。

把监听的事件从keyup替换为input事件。input事件会在输入框内容实际发生变化时触发，不管是普通键盘输入、组合键输入还是粘贴操作，都能准确捕获到最新的输入值。

function validate_pass(element) {
  let password = $(element).val();
  if (!(/^.{8,20}$/.test(password))) {
    return '密码长度必须在8-20位之间。';
  }
  else if (!(/(?=.*[A-Z])/.test(password))) {
    return '必须包含至少一个大写字母。';
  }
  else if (!(/(?=.*[a-z])/.test(password))) {
    return '必须包含至少一个小写字母。';
  }
  else if (!(/(?=.*[0-9])/.test(password))) {
    return '必须包含至少一个数字（0-9）。';
  }
  else if (!(/(?=.*[@#$%&])/.test(password))) {
    return '必须包含至少一个特殊字符(@#$%&)。';
  }
  return true;
}
$('#user-pass').on('input',(e)=>{
  console.log($('#user-pass').val()); 
  let resp = validate_pass('#user-pass');
  if(resp === true){
    $('label[for="user-pass"]').text('Password').css('color','#9e9e9e');
    $('#user-pass').removeClass('invalid').addClass('valid');
  }else{
    $('label[for="user-pass"]').text(resp).css('color','red');
    $('#user-pass').addClass('invalid').removeClass('valid');
  }
});

1. 修正正则写法：原正则/^(.{8,20}$)/多了冗余括号，改为/^.{8,20}$/；正向预查类正则无需^开头，只需验证字符串中存在对应字符即可。
2. 移除按键过滤：input事件仅在内容变化时触发，Alt、Shift这类不会改变内容的按键不会触发校验，无需额外过滤。
3. 简化DOM操作：合并removeClass和addClass的调用，让代码更简洁。

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