value属性似乎不显示输入字段内容

value-attribute seems not to show input-field-content

本文关键字：输入 字段 显示 属性 value      更新时间：2023-09-26

我正在尝试使用jquery来检查是否已经填写了每个输入字段。如果是的话，我想在表格周围画一个绿色的边框。

这就是我的方法：

if($('input:text[value=""], textarea[value=""]').length == 0){
    alert("DONE");
}

将值悬停在上面="-选择器不起作用。

根据firebug的说法，value属性似乎只包含输入字段的默认值，而不包含用户插入的实际内容。

此命令提醒我实际内容：

$('input:text[value!=""]').each(function(){
    alert($(this).val());
});

我的问题：实际的输入字段内容存储在哪里？如果有空字段，我如何使用jQuery进行有效检查？

您是对的，属性选择器只适用于该属性真正具有的值。稍后，更改输入的值只会更改DOM元素的内部状态。

实际输入字段内容存储在哪里？

您可以通过DOM元素elementNode.value的value属性访问该值。

如果有空字段，我如何使用jQuery进行有效检查？

您可以使用.filter:

$('input').filter(function() {
    return !this.value;
});

验证输入的一种巧妙方法是将验证规则附加到元素，供脚本查找和验证。

要制作所需字段：

<input type="text" data-validate="required" />

您的脚本：

$('[data-validate]').each(function() {
    var rule = $(this).attr('data-validate'), value = $(this).val();
    switch (rule) {
        case 'required':
            if (!value) {
                alert('Field invalid!');
            }
        break;
    }
});

它对我来说效果很好。

您可以通过只选择特定元素类型或特定元素（如窗体）的子元素来提高效率。

您可以这样尝试使用.filter()：

var empty = $('input:text').filter(function(){ return $(this).val() == "" }).length;
if(empty > 0){
    alert("There are "+empty+" fields which have not been filled out");
}

如果您不愿意使用Jquery validate，我的方法。

为每个输入字段指定一个类，然后使用Jquery class selector测试这些字段是否都已填充。您甚至可以将其用于下拉列表。

您应该使用以下构造：

var incomplete = $('form :input').filter(function() {
  return $(this).val() == '';
});
if (incomplete) {
  alert('Please fill all fields!');
}

：input选择器选择所有输入、文本区域、选择和按钮元素。

阅读以下内容：http://api.jquery.com/input-selector/

相关文章：