Javascript:如何访问表单对象's字段

Javascript: how to access form object's fields

本文关键字：字段 单对象 访问表 Javascript      更新时间：2023-09-26

根据我的理解，this.form发送整个表单对象。我有这张表格

<form name ="bannerForm" method="post">
 <table>
     <tr>
         <td>Enter banner message</td>
         <td><input class="messagebannner" type="text" id="bannerMessage" name="bannerMessage" size="40" onblur="validateEmptyFields(this);"></td>
         <td><span name="messageBanner" id="messageBanner"></span></td>
     </tr>

我想动态更改span标记的值，并且我正在尝试在validateEmptyField（）函数中不硬编码id的情况下进行更改。我怎样才能做到这一点？真的有可能吗？表单对象在这方面有帮助吗？？这是validateEmptyField（）函数：

function validateEmptyFields(inputField){
     if(inputField.value.length === 0){
//show error message in span
         return false
     }
    else {
     return true;
}
}

您可以访问这样的表单和表单字段。

//form acccess
document.forms["my_form_name"];
//fields access
document.forms["my_form_name"]["input_name"];

您的表单验证方法需要一些改进。

查看有关JavaScript表单验证的W3Schools页面。一旦你有了它的概念，它就很容易了。

经过一点调整后，您的HTML和JavaScript应该如下所示。

HTML:

<form id="bannerForm" name="bannerForm" method="post">
    <table>
        <tr>
            <td>Enter banner message</td>
            <td>
                <input class="messagebannner" type="text"
                    name="bannerMessage" size="40" onblur="validateBannerForm();" />
            </td>
            <td>
                <span id="messageBanner"></span>
            </td>
        </tr>
    </table>
</form>

JavaScript:

function validateBannerForm() {
    var x = document.forms["bannerForm"]["bannerMessage"];
    if (x.value == null || x.value == "") {
        document.forms["bannerForm"]["messageBanner"].value = "This is an error message.";
        return false;
    }
}

我个人一点也不喜欢这种验证方法，但它很容易理解，似乎适合你的目的。当涉及到JavaScript和HTML表单时，我会研究其他验证实践。

你可以做一些jQuery魔术（没有也可以，但更容易）

$(inputField).parent().next().children('span').text(your text here);
相关文章：