Question

我有三个文字输入：

名字
姓氏
用户名

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

flength
llength
ulength

（第一个字母对应输入，示例名字：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');
    }
});

为什么这个脚本不起作用？我应该修改什么？的修改
demo

Answer 1

看到您的评论后

更改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');
    }
});

选中此http://jsfiddle.net/Q2y8m/4/

Answer 2

试试这个

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

}）;

演示 http://jsfiddle.net/3yqVg/2/

Answer 3

尝试更改var x = l.id; width var x = $(this).id;

同时验证多个输入

3 个答案: