Question

我有一组带有动态名称的文本字段：如qty541; qty542; qty957 由"qty"和product id

组成

如何使用Javascript验证我的所有数据字段是否为空？

非常感谢。

Answer 1

您可以遍历表单的元素：

var form = document.getElementById('theForm');
var index;
var field;
for (index = 0; index < form.elements.length; ++index) {
    field = form.elements[index];
    if (field.name.substring(0, 3) === "qty") {
        // Check field.value here
    }
}

Live example

以上假设表单有一个id，但是您可以访问form元素，其余部分也会如此。

偏离主题：通过jQuery，Prototype，YUI等各种JavaScript库中提供的实用程序功能，可以使这些内容变得更加简单。，Closure或any of several others。它们还可以平滑浏览器差异（或彻底的浏览器错误），让您专注于手头的工作，而不是担心浏览器的不一致。

Answer 2

最简单的方法是使用jQuery，Protoype等javascript框架。使用此框架，您可以使用reg expr方式创建搜索模式。如果你不能使用它，它确实需要更多的工作：

一种方式：

var formObj = document.forms[0]; //as an example
var fields = formObj.getElementsByTagName("input");
for (i=0; i < fields.length, i++)
{
   if (fiedls[i].name.indexOf("qty") > 1)
   {
     //do something
   }
}

Answer 3

普通JS：

例如，在所有字段上使用class =“quantity”并使用getElementsByClassName - 这几乎将我们带入jQuery模式

window.onbeforeunload=function() {
  var elems = document.getElementsByClassName("quantity"); // needs help in some browsers
  for (var i=0,n=elems.length;i<n;i++) {
    if (elems[i].value!="") {
      return "You have filled in a quantity");
    }
  }
}

window.onload=function() {
  document.forms[0].onsubmit=validate;
}

function validate() {
  var elems = document.getElementsByClassName("quantity"); 
  for (var i=0,n=elems.length;i<n;i++) {
    if (elems[i].value=="") {
        alert("Please fill in a quantity");
        elems[i].focus();
        return false;
      }
    }
  }

标准方法：

function validate() {
  var elem;
  for (var i=0,n=this.elements.length;i<n;i++) {
    elem = this.elements[i];
    if (elem.name && elem.name.indexOf("qty")===0) {
      if (elem.value=="") {
        alert("Please fill in a quantity");
        elem.focus();
        return false;
      }
    }
  }
  return true; // allow submit
}

Answer 4

使用：

<p>
 <input type="text" name="qty3232" value="43"/><br/>
 <input type="text" name="qty5532" value="as"/><br/>
 <input type="text" name="qty5521" value=""/><br/>
 <input type="text" name="qty3526" value="34"/>
</p>
<br/>
<h3>Log</h3>
<pre id="log"></pre>

Javascript（没有jQuery）：

var inputs = document.getElementsByTagName('input');
var log = document.getElementById('log');

for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].type == 'text' && inputs[i].name.substring(0,3) == 'qty') {
        if (inputs[i].value == '') {
            log.innerHTML += inputs[i].name + " value empty.\n";
        } else {
            log.innerHTML += inputs[i].name + " value not empty.\n";
        }
    }
}

http://jsfiddle.net/jxmMW/

但是在jQuery中使用选择器要容易得多。

var log = $('#log');

$('input[name^="qty"]').each(function(){
    if (this.value == '') {
        log[0].innerHTML += this.name + " value empty.\n";
    } else {
        log[0].innerHTML += this.name + " value not empty.\n";
    }
});

http://jsfiddle.net/jxmMW/1/

Javascript - 使用动态名称验证字段的值

4 个答案: