Javascript 同时验证多个输入

我有三个文本输入：

• 名字
• 姓
• 用户名

在我仅有的表格中，这些输入类型为：text。
我希望它们中的每一个至少有4个字符长，因此我决定一起验证它们。
我想使用Jquery显示一条错误消息，当长度小于4时为红色，当长度大于4时为绿色。 我分别使用以下ID放置了三条错误消息：

• 弗莱恩
• 长度
• 乌伦特

（第一个字母对应于输入，例如名字：flength等）
下面是我的代码：

$('input [type= text]').keyup(function ({
    var l = $(this).val();
    var x = l.id;
    x = x.charAt(0);
    x = '#' + x + 'length';
    if (l.length < 4) {
        $(x).removeClass('valid').addClass('invalid');
    } else {
        $(x).removeClass('invalid').addClass('valid');
    }
});

$（'input[type=text]'）。键控（函数({
var l=$（this.val（）；
var x=l.id；
x=x.charAt（0）；
x='#'+x+'length'；
如果（长度小于4）{
$（x）.removeClass（'valid'）.addClass（'invalid'）；
}否则{
$（x）.removeClass（'invalid'）.addClass（'valid'）；
}
});

为什么这个脚本不能工作？我应该修改什么？
编辑

---

查看您的评论后

更改

var x=$（this.attr（“id”）；

也无法解决问题

自

$（this.attr（“id”）以来

提供当前元素id，当前元素是您的输入标记元素，您没有设置

id

属性，而是将其设置为

div

标记，正如您在注释中所述，因为您试图检索未设置的id属性，并且您收到了一个错误

我能给出的一个解决办法就是这样

<input type="text" name="flength"/> // set name attribute same as div ids
<input type="text" name="llength"/>
<input type="text" name="ulength"/>

 $('input[type=text]').keyup(function ({
    var l = $(this).val(); // get the input string
    var x = $(this).attr('name'); // get the current input element name attribute 
    if (l.length < 4) {
        $('#' + x).removeClass('valid').addClass('invalid');
    } else {
        $('#' + x).removeClass('invalid').addClass('valid');
    }
});

//将name属性设置为与div id相同
$（'input[type=text]'）。键控（函数({
var l=$（this）.val（）；//获取输入字符串
var x=$（this）.attr（'name'）；//获取当前输入元素的name属性
如果（长度小于4）{
$（'#'+x）.removeClass（'valid'）.addClass（'invalid'）；
}否则{
$（'#'+x）.removeClass（'invalid'）.addClass（'valid'）；
}
});

---

选中此项

尝试更改var

x=l.id；

宽度var

x=$（this.id；

尝试此项

$(document).ready(function () {
$('input[type=text]').keyup(function () {
    var l = $(this).val();
    var x = $(this).attr('id'); // notice it is not l.id
    x = x.charAt(0);
    x = '#' + x + 'length';
    if (l.length < 4) {
        $(x).removeClass('valid').addClass('invalid');
    } else {
        $(x).removeClass('invalid').addClass('valid');
    }
});

$（文档）.ready（函数（）{
$（'input[type=text]'）。键控（函数（）{
var l=$（this.val（）；
var x=$（this.attr（'id'）；//注意它不是l.id
x=x.charAt（0）；
x='#'+x+'length'；
如果（长度小于4）{
$（x）.removeClass（'valid'）.addClass（'invalid'）；
}否则{
$（x）.removeClass（'invalid'）.addClass（'valid'）；
}
});

}))

---

演示

您所说的“无法工作”是什么意思？发生了什么？您的控制台错误是什么？@Sparky您现在可以看到演示将第3行更改为var x=$（this.attr（'id'）；感谢大家的帮助，问题已经解决。@user689，您所说的“无法工作”是什么意思。发生了什么？您的控制台错误是什么？@Sparky错误消息保持红色，这意味着它不起作用。错误：Uncaught TypeError:无法调用的方法“charAt”undefined@user689，您认为应该忽略这一点吗？“无法调用未定义的方法

charAt

”~将你的努力和行动集中在代码的相应行上！@user689在看到你的代码后，我有一个问题，你的输入元素是否有ID FLENGHT LLENGHT或其他元素？@Sparky在你让我检查之前，我不知道控制台错误，但我仍然不知道在这种情况下该怎么办我不想给inp上色ut，我想给错误消息\@user689涂上颜色，并提供一些html代码，其中错误span或div isI正试图制作一个Js Fiddle演示。@user689，您的帖子中的代码包含错误，但您未能显示完整的示例并解释所得到的错误只会造成混乱。@Manish this.id不起作用。id w未分配给输入元素，但分配给li元素