javascript - 在具有多种表单的页面中验证 JS 中的表单元素

Question

JS 正确打印传入的表单名称，但是在验证表单元素时我在下面收到错误消息。表单名称是在循环中动态生成的。

谢谢

错误

TypeError: document.form_name is undefined

JS

function validate_update(form_id)
{
    var form_name = 'form_bottom_update_' + form_id;
    //alert (form_name);  //Prints form name correctly as form_1, form_2, form_3

    var bg_name = (document.form_name.bg_name.value).replace(/ /gi, "");

    if (bg_name == '')
    {
        alert('Enter a Name');
        return false;
    }

    return true;
}

HTML

<form name="form_1" action="update.php" method="POST" onsubmit="return validate_update(1);">
   <input type="text" name="bg_name" value="" />
   <input type="submit" name="submit" value="Update" />
</form>

<form name="form_2" action="update.php" method="POST" onsubmit="return validate_update(2);">
   <input type="text" name="bg_name" value="" />
   <input type="submit" name="submit" value="Update" />
</form>

<form name="form_3" action="update.php" method="POST" onsubmit="return validate_update(3);">
   <input type="text" name="bg_name" value="" />
   <input type="submit" name="submit" value="Update" />
</form>

Answer 1

不应该这样：

var bg_name = (document.form_name.bg_name.value).replace(/ /gi, "");

是：

var bg_name = (form_name.bg_name.value).replace(/ /gi, "");

您打印form_name变量，但稍后您使用document.form_name的是不同的对象。要么使用后者，要么在分配 时bg_name，使用document：

document.form_name = 'form_bottom_update_' + form_id;

Answer 2

改变解决问题的方法。表单名称保持不变，文本名称变为动态。

function validate_update(form_id)
{
    var element_name = 'bg_name_' + form_id;

    var bg_name = (document.getElementsByName(element_name)[0].value).replace(/ /gi, "");

    if (bg_name == '')
    {
        alert('Enter a Name');
        return false;
    }

    return true;
}

<form name="form" action="update.php" method="POST" onsubmit="return validate_update(2);">
   <input type="text" name="bg_name_2" value="" />
   <input type="submit" name="submit" value="Update" />
</form>

Answer 3

你没有在你的 html 中的任何地方使用 form_id 那么你怎么能在 javascript 中调用它