javascript - jquery 用户名验证不起作用

Question

您好，我正在尝试为我的网站编写用户验证脚本，但有些东西不对，因为它无法正常工作

:我的代码j脚本:

$(document).ready(function() {
    $('input[name*="username"]').keyup(validateuser);
});

function validateuser() {
    var username = $('input[name="username"]').val();

    if(username == ""){
        $('input[name="username"]').attr('id', 'invalid');
    } else {
        $('input[name="username"]').validate({
        submitHandler: function(form) {
            $('input[name="username"]').attr('id', 'valid');
        }
    });
    }
}

和一个 html 输入表单:

<input type="text" name="username" pattern="[A-Za-z0-9\w]{4,20}"><br>

所以这个脚本所要做的就是设置一个ID来输入，如果它有效或无效，并将边框颜色更改为红色或绿色，所以首先如果我清除该字段及其为空，我会得到红色边框，但如果我写的东西仍然保持红色，根本没有任何变化，所以可能代码的第二部分不起作用，只是不确定为什么，如果有人可以帮助我解决这个问题，那就太好了

Answer 1

如果您使用 JQuery 验证插件，那么您应该注意，您要验证的选择器不应该是 input 标记，而是 form，如上所述这里:

https://jqueryvalidation.org/validate

如果我错了，请纠正我。

要在 keyup 后验证输入，以下代码可能会有所帮助:

替换这个:

$('input[name="username"]').validate({
       submitHandler: function(form) {
           $('input[name="username"]').attr('id', 'valid');
}

有了这个:

var regex = [A-Za-z0-9\w]{4,20};
$(this).attr('id', regex.test($(this).val())?'valid':'invalid');