javascript - 使用 javascript 检查表单字段的值

Question

我想检查表单的值是否为空？在像 jquery.ketchup.0.3.2 这样的许多验证器让我失败（或者我让他们失败）之后，我正在尝试编写自己的验证器，但我无法让这个功能正常工作。

function validate() {
    alert("hmmm");
    var inputs = document.forms["register"].getElementsByTagName("input");
    for (var item in inputs) {
        if(item.value.trim() == "")
            alert("nullField");
    }
}

你能告诉我上面的功能有什么问题吗？

score 3 · Accepted Answer

如果您要使用 jQuery，请使用 jQuery。

validate(){
  var $inputs = $('input', 'form[name="register"]');
  $inputs.each(function(){
    var val = $.trim(this.value);
    if(!val.length){
       // Not valid
    }
  });
}

score 3 · Accepted Answer

我想知道这是否是for您使用的循环。要遍历集合（数组），请使用普通for循环，而不是for in. 也许这可以解决它：

function validate() {
    alert("hmmm");
    var inputs = document.forms["register"].getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        if(inputs[i].value.trim() == "")
            alert("nullField");
    }
}

请注意，.trim()并非在所有浏览器中都可用：http: //kangax.github.io/es5-compat-table/#String.prototype.trim

一个 jQuery 替代方案，可能是首选，是使用类似的东西：

$('form[name="register"]').find('input[type="text"]').each(function () {
    var $this = $(this);
    if (!$.trim($this.val())) {
        // Left empty
    }
});

参考：

.find()：http ://api.jquery.com/find/
.each()：http ://api.jquery.com/each/
.trim()：http ://api.jquery.com/jQuery.trim/

score 0 · Accepted Answer

如果您只想使用 javascript：

首先确保定义了修剪功能：

if(!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^\s+|\s+$/g,'');
  };
}

现在为实际功能：

 function validate() {
    var inputs = document.forms["register"].getElementsByTagName("input");
    for (var i = 0, len = inputs.length; i < len ; i++) {
        if(inputs[ i ].value.trim() == ""){
            // Validation failed
        }
    }
    // Validation successful
}

score -2 · Accepted Answer

我强烈（我的意思是强烈）建议不要编写自己的验证。尽管如此，您的代码仍有一些问题。

for..var..in 构造遍历对象的所有属性。所以一个对象foo = { bar: '0', baz: '1'}会遍历bar和baz（属性，而不是值）。如果你想得到你需要通过做来表示的值 for(var i in foo){ console.log(foo[i]);}，或者在你的例子中：inputs[item].value。
getElementsByTagName返回 a NodeList（请参见此处）。NodeLists 在列表中的元素旁边有其他属性。

如果您使用的是 jQuery，那么您只需$("#register input").val()获取相关值的数组，您就可以使用该$.map函数为每个值做一些事情。

javascript - 使用 javascript 检查表单字段的值

4 回答 4

Related

Reference