Question

我的页面上有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存储在一个数组中，然后单击以检查是否有任何输入为空。

我如何以最简单的方式做到这一点？

Answer 1

使用必需的标签代替下面的

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

Answer 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;
  }

Answer 3

以防万一必需属性失败..您可以这样做。向模糊事件添加验证功能，即用户离开字段时。

<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...
    }
 }

Answer 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");
                        }
                    });
                });
            });

使用JavaScript检查所需的输入

4 个答案: