无法使用表单变量访问 JavaScript 表单元素答案

【问题标题】：Not able to access JavaScript Form Elements by using Form Variable无法使用表单变量访问 JavaScript 表单元素
【发布时间】：2021-07-29 15:07:34
【问题描述】：

我正在尝试使用 JavaScript 从 Form 标记 内部访问 Label 标记 以进行用户名验证。如果 RegEx 匹配，则在标签中显示错误，否则隐藏该标签。当我尝试更改文本字段上的文本时，出现以下错误。

Uncaught TypeError: can't access property "style", document.forms.form1.uNameError 未定义

我的代码：

<body>
<form name="form1">

        // few code here

        <div class="main">
            <input type="text" id="uname" name="username" onchange="checkUsername()">
            <label id="uNameError" style="color: red;">Incorrect name</label> 

        //few code here

        </div>
</form>

<script>
        var form=document.forms['form1'];

        function checkUsername() {
            
            let username=form["uname"].value.trim();
            let validate= /[^a-zA-Z\s]/ig.test(username);
            
            if(validate===true){
                form["uNameError"].style.display="inline";
                
            }else {
                form["uNameError"].style.display="none";
            }

        }
    </script>

</body>

如果可能，我如何重用我的 form 变量。

【问题讨论】：

你可以使用form.querySelector('#uNameError')
@ChrisG 这不是我的第一个元素。只是为了演示，我只添加了一些代码。
一个id 应该是唯一的，所以如果<label id="uNameError"> 在表单中的某个地方，我的代码就可以工作。不确定“这不是我的第一个元素”是什么意思？你试过我的代码但它没有工作吗？如果是这样，请在问题中添加minimal reproducible example，以便我指出您的错误
您可以将form["uNameError"] 更改为document.getElementById("uNameError")，将form["uname"] 更改为document.getElementById("uname").value.trim();，这是最简单的方法。
@kattie 表单变量是正确的，但是不能用document.forms 调用label 标签。

标签： javascript html css forms

【解决方案1】：

document.forms 仅支持表单元素。 eg：输入、按钮等Have a look.

直接访问标签元素...

1) ... document.forms的自然方式

form["uname"].labels[0] 
// Note!! 
// A connection must be established between label and input.
// I mean, you have to add a for attribute for="uname" inside label element. uname is id of input element. Then it will possible to get label via .label[0].

或

2) ...您可以通过之前声明的形式选择它：

form.querySelector('#uNameError');

或

3) ... 你可以使用 nextElementSibling :

form["uname"].nextElementSibling

将使您可以访问所需的标签。

所以：

<body>
    <form name="form1">
            <div class="main">
                    <input type="text" id="uname" name="username" onchange="checkUsername()">
                    <label id="uNameError" for="uname" style="color: red;">Incorrect name</label>
            </div>
    </form>
    
    <script>
            var form=document.forms['form1'];
    
            function checkUsername() {

                let username=form["uname"].value.trim();
                let validate= /[^a-zA-Z\s]/ig.test(username);
                if(validate===true){
                    form["uname"].labels[0].style.display="inline";
                    // or
                    // form.querySelector('#uNameError').style.display="inline";
                    // or
                    // form["uname"].nextElementSibling.style.display="inline";
                }else {
                    form["uname"].labels[0].style.display="none";
                    // or
                    // form.querySelector('#uNameError').style.display="none";
                    // or
                    // form["uname"].nextElementSibling.style.display="none";
                }
            }
        </script>
    
    </body>

题外话。这里我建议你使用 onkeyup 代替 onchange 并改进你的正则表达式结构。

【讨论】：

感谢 onkeyup。你能纠正我的正则表达式吗？
@kattie 实际上正则表达式是正确的。由于我只看到 username ，我想也许它在逻辑上不需要包含空格。但是如果是正常的名字，就没有问题了。

【解决方案2】：

这是我能给出的最好解释：

<form name="form1">
  <input type="text" id="uname" name="username">
  <label id="uNameError" style="color: red;">Incorrect name</label>
</form>
<script>
  var form = document.forms['form1']
  console.log(form.elements.length)
</script>

通过运行上面的代码，我们可以看到document.forms.elements 的长度为1，尽管我们有label 和input。原因是：

只能使用document.forms调用这些标签：

<button>
<fieldset>
<input> (with the exception that any whose type is "image" are omitted for historical reasons)
<object>
<output>
<select>
<textarea>

我们可以看到label 没有进入列表。阅读更多关于它的信息here。

解决方案：

您可以使用output 而不是label 以使现有代码正常工作。

<form name="form1">
            <input type="text" id="uname" name="username" onchange="checkUsername()">
            <output id="uNameError" name='uNameError' style="color: red;">Incorrect name</output> 
</form>

<script>
        var form=document.forms['form1']

        function checkUsername() {
            
            let username=form["uname"].value.trim();
            let validate= /[^a-zA-Z\s]/ig.test(username);
            
            if(validate===true){
                form["uNameError"].style.display="inline";
                
            }else {
                form["uNameError"].style.display="none";
            }

        }
    </script>

您可以使用id 调用label。

<form name="form1">
  <input type="text" id="uname" name="username" onchange="checkUsername()">
  <label id="uNameError" style="color: red;">Incorrect name</label>

</form>

<script>
  var form = document.forms['form1'];

  function checkUsername() {

    let username = form["uname"].value.trim();
    let validate = /[^a-zA-Z\s]/ig.test(username);
    let uNameError = document.getElementById('uNameError')
    if (validate === true) {
      uNameError.style.display = "inline";

    } else {
      uNameError.style.display = "none";
    }

  }

</script>

【讨论】：

OP 询问如何访问。不是。主要区别在于单击正确设置的标签将激活其输入。
目的是解决问题，而不是“使用label标签”。如果代码可以在没有它的情况下工作，那就这样吧。