使用 javascript 检查所需的输入

Posted 2023-05-09

【中文标题】使用 javascript 检查所需的输入

【英文标题】：Check required inputs with javascript

【发布时间】：2019-07-08 04:51:13

【问题描述】：

我的页面上有 4 个输入，在一个按钮 onClick 上，我想检查所有输入是否都填充了文本。

<input type="text" value="" id="input1">
<input type="text" value="" id="input2">
<input type="text" value="" id="input3">
<input type="text" value="" id="input4">

我想要什么：将所有需要的输入 ID 存储在一个数组中，然后单击，检查是否有任何输入，即为空。

我怎样才能以最简单的方式做到这一点？

【问题讨论】：

欢迎来到 Stack Overflow！请使用tour（您将获得徽章！）并通读help center，尤其是How do I ask a good question? 您最好的选择是进行研究，search 以获取有关 SO 的相关主题，然后试一试. 如果您在进行更多研究和搜索后遇到困难并且无法摆脱困境，请发布您的尝试minimal reproducible example，并具体说明您遇到的问题。人们会很乐意提供帮助。

最简单的方法是自己尝试检查.each()，:empty，或检查.length

Validating multiple fields in a form的可能重复

参见：developer.mozilla.org/en-US/docs/Web/html/Element/…

【参考方案1】：

使用下面给出的必需标签

<input type="text" value="" id="input1" required>

【参考方案2】：

您也可以尝试添加 REGEX 进行更严格的检查

 // using Plain javascript

  var input1= document.getElementById('input1').value;
  if(input1 == "" )
      alert("Input 1 is Empty");
        return false;
  

  var input2 = document.getElementById('input2').value;
  if(input12 == "" )
      alert("Input 2 is Empty");
        return false;
  

  var input3 = document.getElementById('input3').value;
  if(input3 == "" )
      alert("Input 3 is Empty");
        return false;
  


  var input4 = document.getElementById('input4').value;
  if(input4 == "" )
      alert("Input 4 is Empty");
        return false;
  

【讨论】：

但是我如何使用多个输入来做到这一点？

每个输入的代码块相同，让我为您更新代码。

【参考方案3】：

只是万一所需的属性失败..你可以这样做.. 为 blur 事件添加验证函数，即用户离开字段时..

<input type="text" onblur="validate(this)" value="" id="input1">
<input type="text" onblur="validate(this)" value="" id="input2">
<input type="text" onblur="validate(this)" value="" id="input3">
<input type="text" onblur="validate(this)" value="" id="input4">

<button> ... </button>

使用 jquery 你可以做到这一点..

 function validate(obj)
    if($(obj).val() == '')
       alert('this Field cannot be empty');
       $(obj).focus();  //send focus back to the object...
    
 

【参考方案4】：

<input type="text" value="" id="input1">
<input type="text" value="" id="input2">
<input type="text" value="" id="input3">
<input type="text" value="" id="input4">






jQuery(function($)

                var arr = [];
                // number of input elements
                var count = $("input").length;
                // store list of input ids
                $("buttonName").on('click', function(event) 
                     $("input").each(function(i)
                        var currId = $(this).attr('id');
                        arr.push(currId);
                        if ($(this).val()=="") 
                            alert(currId+": has no input");
                        
                    );
                );
            );