jQuery检查是否<输入>存在并且具有值

jQuery check if <input> exists and has a value

本文关键字：存在 输入 检查 是否 lt jQuery gt      更新时间：2023-09-26

我有以下示例：

<input type="text" class="input1" value="bla"/>

有没有办法检查这个元素是否存在，并且在一个语句中是否有值？或者，至少，任何比更短的东西

if($('.input1').length > 0 && $('input1').val() != '')

只是在一英里长的条件下感到沮丧。

如果输入不存在，它就不会有值。试试这个。。。

if($('.input1').val())

你可以做：

if($('.input1').length && $('.input1').val().length)

当值为0时，length在条件下计算为false。

您可以这样做：

jQuery.fn.existsWithValue = function() { 
    return this.length && this.val().length; 
}
if ($(selector).existsWithValue()) {
        // Do something
}

我在jQuery代码中找到了它。.val((函数目前从attributes.js的第165行开始

val: function( value ) {
    var hooks, ret, isFunction,
        elem = this[0];
        /// NO ARGUMENTS, BECAUSE NOT SETTING VALUE
    if ( !arguments.length ) {
        /// IF NOT DEFINED, THIS BLOCK IS NOT ENTERED. HENCE 'UNDEFINED'
        if ( elem ) {
            hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ];
            if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
                return ret;
            }
            ret = elem.value;
            /// IF IS DEFINED, JQUERY WILL CHECK TYPE AND RETURN APPROPRIATE 'EMPTY' VALUE
            return typeof ret === "string" ?
                // handle most common string cases
                ret.replace(rreturn, "") :
                // handle cases where value is null/undef or number
                ret == null ? "" : ret;
        }
        return;
    }

因此，您将得到undefined、""或null——所有这些在if语句中的求值结果都为false。

您可以创建自己的自定义选择器:hasValue，然后使用它来查找、筛选或测试任何其他jQuery元素。

jQuery.expr[':'].hasValue = function(el,index,match) {
  return el.value != "";
};

然后你可以找到这样的元素：

var data = $("form input:hasValue").serialize();

或者用.is() 测试当前元件

var elHasValue = $("#name").is(":hasValue");


jQuery.expr[':'].hasValue = function(el) {
  return el.value != "";
};
var data = $("form input:hasValue").serialize();
console.log(data)
var elHasValue = $("[name='LastName']").is(":hasValue");
console.log(elHasValue)
label { display: block; margin-top:10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label>
    First Name:
    <input type="text" name="FirstName" value="Frida" />
  </label>
  <label>
    Last Name:
    <input type="text" name="LastName" />
  </label>
</form>

进一步阅读：

  • 使jQuery :contains大小写不敏感
  • 制作您自己的自定义jQuery选择器
  • 探索jQuery选择器，第3部分
if($('#user_inp').length > 0 && $('#user_inp').val() != '')
{
    $('#user_inp').css({"font-size":"18px"});
    $('#user_line').css({"background-color":"#4cae4c","transition":"0.5s","height":"2px"});
    $('#username').css({"color":"#4cae4c","transition":"0.5s","font-size":"18px"});
}

我会这样做：$('input[value]').something。这会找到所有有价值的输入，并对其进行操作。

相关文章：