jquery - 使用 Jquery 进行表单验证以检查字符长度

Question

我正在尝试使用 JQuery 来计算每个输入字段中有多少个字符。

目前我有这个代码：

$(document).ready(function(){
$('#add_post_title').keyup(function(){

        var max = 25;
        var len = $(this).val().length;

        if(len > max){
            $('#check_title').text('No');
        }else{
            var char = max - len;
            $('#check_title').text('Yes');
        }

    });

    $('#add_post_desc').keyup(function(){

        var max = 25;
        var len = $(this).val().length;

        if(len > max){
            $('#check_desc').text('No');
        }else{
            var char = max - len;
            $('#check_desc').text('Yes');
        }

    });
});

以及 html 表单（简化了一点）：

<form>
<div id="check_title"><p>No</p></div>  <div id="check_post"><p>No</p></div>
<input type="text" name="title" class="post_input" id="add_post_title" placeholder="Title" /><br />
<textarea name="desc" id="add_post_desc" placeholder="Description"></textarea><br />
<input type="submit" name="submit" id="add_post_submit" value="Submit" />
</form>

为什么将文本输入到字段中时，“检查​​” div 中的文本不会变为“是”？

谢谢

Answer 1

您正在使用 check_desc 而不是 check_post：

        $('#add_post_desc').keyup(function(){

    var max = 25;
    var len = $(this).val().length;

    if(len > max){
        $('#check_post').text('No');
    }else{
        var char = max - len;
        $('#check_post').text('Yes');
    }

});

看这里：

http://jsfiddle.net/NxWnv/

Answer 2

你的代码几乎没问题。除了对字段的检查$('#add_post_desc')将 div 设置check_desc为 yes 而不是 div check_post。

除此之外，它工作正常。检查这个小提琴