Javascript jquery用户名验证不起作用

你好，我正在尝试为我的网站编写用户验证脚本，但我发现有些地方不正确，因为它不能正常工作

：我的代码 jscript：

$(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来输入它是否有效，并将边框颜色更改为红色或绿色，所以首先如果我清除了字段，它是空的，我得到了红色边框，但如果我写一些东西，它仍然保持红色，没有任何更改，所以代码的第二部分可能无法工作，只是不知道为什么，如果有人能帮我解决这个问题，那就太好了，如果您使用的是JQuery验证插件，那么您应该注意，您要验证的选择器不应该是

输入

标记，而是

表单

，如下所述：

如果我错了，请纠正我

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

替换此项：

$('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');

---

如果您使用的是JQuery验证插件，那么您应该注意，要验证的选择器不应该是

输入

标记，而是

表单

，如下所述：

如果我错了，请纠正我

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

替换此项：

$('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');

---

您可以使用

onchange

事件。当元素的值发生更改时，会发生此错误。对于单选按钮和复选框，当选中状态已更改时，会发生onchange事件。您只需要在更改元素时调用脚本函数

下面是一个示例：（html）

---

您可以使用

onchange

事件。当元素的值发生更改时，会发生此错误。对于单选按钮和复选框，当选中状态已更改时，会发生onchange事件。您只需要在更改元素时调用脚本函数

下面是一个示例：（html）

---

以下是一个仅使用jQuery（无插件）的完整示例：

.有效{
边框：5px纯绿色；
}
.无效{
边框：5px纯红；
}
$（函数（）{
jQuery（'#username'）.on（'input'，function（）{
$（“#用户名”）.removeClass（）；
var username=$（this.val（）；
变量isValid=/^[a-zA-Z0-9]*$/.test（用户名）；
如果（有效）
$（“#用户名”）.addClass（“有效”）；
其他的
$（“#用户名”）.addClass（“无效”）；
});
});

编辑：

要基于正则表达式和字符长度进行验证，请执行以下操作：

$(function () {

    jQuery('#username').on('input', function () {

        $("#username").removeClass();

        var username = $(this).val();
        var isValid = /^[a-zA-Z0-9]*$/.test(username);
        var length = username.length;
        if (isValid && (length > 4) && (length < 20))
            $("#username").addClass("valid");
        else
            $("#username").addClass("invalid");
    });
});

$（函数（）{
jQuery（'#username'）.on（'input'，function（）{
$（“#用户名”）.removeClass（）；
var username=$（this.val（）；
变量isValid=/^[a-zA-Z0-9]*$/.test（用户名）；
var length=username.length；
如果（有效&&（长度>4）和&（长度<20））
$（“#用户名”）.addClass（“有效”）；
其他的
$（“#用户名”）.addClass（“无效”）；
});
});

以下是一个仅使用jQuery（无插件）的完整示例：

.有效{
边框：5px纯绿色；
}
.无效{
边框：5px纯红；
}
$（函数（）{
jQuery（'#username'）.on（'input'，function（）{
$（“#用户名”）.removeClass（）；
var username=$（this.val（）；
变量isValid=/^[a-zA-Z0-9]*$/.test（用户名）；
如果（有效）
$（“#用户名”）.addClass（“有效”）；
其他的
$（“#用户名”）.addClass（“无效”）；
});
});

编辑：

要基于正则表达式和字符长度进行验证，请执行以下操作：

$(function () {

    jQuery('#username').on('input', function () {

        $("#username").removeClass();

        var username = $(this).val();
        var isValid = /^[a-zA-Z0-9]*$/.test(username);
        var length = username.length;
        if (isValid && (length > 4) && (length < 20))
            $("#username").addClass("valid");
        else
            $("#username").addClass("invalid");
    });
});

$（函数（）{
jQuery（'#username'）.on（'input'，function（）{
$（“#用户名”）.removeClass（）；
var username=$（this.val（）；
变量isValid=/^[a-zA-Z0-9]*$/.test（用户名）；
var length=username.length；
如果（有效&&（长度>4）和&（长度<20））
$（“#用户名”）.addClass（“有效”）；
其他的
$（“#用户名”）.addClass（“无效”）；
});
});

我的方法没有区别，结果相同我的方法没有区别，结果相同那么如何验证输入字段呢？据我所知，我没有使用任何插件没有插件？那么验证方法就不起作用了！好的，那么如何验证输入字段呢？据我所知，我没有使用任何插件没有插件？那么验证方法就不起作用了！它可以工作，但不应该像你输入的那样：username59没关系，它是有效的，如果你提示用户名59%%，它是无效的，但是如果你用符号开始一切，用单词或数字开始一切，它仍然是有效的例子：%%&&&&^^^^^&*用户名59是有效的，那么改变你的正则表达式我做的第一次谷歌搜索给了我字母数字字符的有效表达式-/^[a-zA-Z0-9]*$/我已经尝试过这个模式了，根本没有结果代码不起作用，如果我使用这个模式/^[a-zA-Z0-9]{4,20}*$/或/^[a-zA-Z0-9]*${4,20}/是的，但我想添加最小4和最大20它起作用，但不是像您输入的示例那样：用户名59这是正确的，如果你提示用户名59%%，它是无效的，但是如果你用符号开始一切，用单词或数字开始一切，它仍然是有效的例子：%%&&&&^^^^^&*用户名59是有效的，那么改变你的正则表达式我做的第一次谷歌搜索给了我字母数字字符的有效表达式-/^[a-zA-Z0-9]*$/我已经尝试过这个模式了，根本没有结果代码不起作用，如果我使用这个模式/^[a-zA-Z0-9]{4,20}*$/或/^[a-zA-Z0-9]*${4,20}/是，但我想添加最小值4和最大值20