javascript - 如何使用 javascript 来验证表单？

Question

我正在尝试构建一个 Django 表单。而我试图实现的 javascript 逻辑是，如果输入表单值不为空，则提交表单。但是，我不确定如何获取 {{form.value}} 的 id。

    <form id = "form1" action="." method="POST">{% csrf_token %}    

    <div class=".col1" style="float:left;vertical-align: middle;">          

        {{ form.region }}

        {{ form.operator }}
    </div>

    <div class="col-xs-2 style="vertical-align: middle;">
        {{ form.value }}
    </div>

    </form>


function SubmitForm1(){

if(document.getElementById( {{Form.Value}} ).value != ""){
    document.getElementById("form1").submit();
}

}

Answer 1

问题的根源在于，您将在 server 端处理的 django 模板中的代码与在 server 端处理的 javascript 中的代码混淆了 < strong>客户端(浏览器)端。服务器端存在的变量名在浏览器中的存在方式不同。在 javascript 中，您只能使用模板呈现到发送到浏览器的 HTML 输出中的元素。

在 django 表单的情况下，您的表单字段通常会使用 id_ + 字段名称 的 id 呈现。所以:

document.getElementById("id_region").value
document.getElementById("id_operator").value
document.getElementById("id_value").value

..etc，将为您提供表单字段的值。

如果您在 View 中使用 prefix= 参数给 Form 构造函数，例如:

myform = MyFormClass(prefix='form1')

然后前缀 (form1)，后跟破折号 -，将被添加到该表单中所有字段的字段名称之前:

 document.getElementById("id_form1-value").value 

如果您不确定表单中字段的名称或 ID，您可以随时在浏览器中执行“查看源代码”或“检查元素”以查看 html 文档中的内容。