jquery - 我无法获取对象 htmlinputelement jquery 的值

Question

我正在使用 html 和 jquery 开发一个网页。许多页面都有带有多种输入类型文本的表单。我正在尝试开发一个 jquery 函数来控制某些输入是否为空或错误。

我想将所有输入值放入一个数组中。当我尝试读取文本值时遇到麻烦，我得到一个对象 htmlinputelement:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {

        $(':button').click(function () {

            var elems = document.querySelectorAll('input[type=text]');
            var array = jQuery.makeArray(elems);

            jQuery.each(array.valueOf(), function (i, valor) {
                if (valor == "")
                     $('div:last').append("Error " + valor + '<br/>');
            });

        });

    });
</script>

<form action="page.html" method="post">
    <input type="text" name="name" id="name" /><br />
    <input type="text" name="surname" id="surname" /><br />
    <input type="text" name="mail" id="mail" /><br />
    <input type="text" name="number" id="number" /><br />
    <input type="text" name="date" id="date" /><br />
    <input type="text" name="place" id="place" /><br />
    <div class="linea">
        <input type="submit" name="send" value="SEND" />
        <input type="reset" name="clear" value="CLEAR" />
        <input type="button" name="check" value="CHECK" />
    </div>
</form>
<div style="border: solid red; width: 250px; height: 450px;"></div>

我还使用了 valor[0].value 和 valor.eq(0).val()，但我无法成功。

如何修复它？

谢谢。

Answer 1

我猜您即将创建验证摘要，但您的代码中有很多错误!

1) 您不需要使用 makeArray 因为 document.querySelectorAll() 给出数组列表

2) 您需要检查 .value 而不是 element 本身，请参阅以下内容

if (valor.value == "")
   $('div:last').append("Error " + valor+ '<br/>'); //gives you control validated

所以你的整个代码看起来像

 $(':button').click(function () {
     var elems = document.querySelectorAll('input[type=text]') //input elements
     jQuery.each(elems, function (i, valor) { //i --> index and valor --> HTMLInputElement
         if (valor.value == "") // check value is blank
             $('div:last').append("Error " + valor.value + '<br/>'); // log that control  
                                                                        or it's value
     });
});

jsFiddle Example

注意: Fiddle 会将输入元素附加到没有值的 div 中。

更新

如果你想发布它，你只需要使用 serialize() 对其进行序列化。

只需使用

$(form).serialize()

要验证表单字段，您可能必须使用 jQuery 验证插件。