JavaScript表单验证-检查空文本框-使用Python和CGI

我正在使用Python和CGI开发一个web应用程序。对于表单验证，我打算使用JavaScript。下面是一个场景- 有一个文本框，用户在其中输入项目名称并单击提交按钮。 如果文本框中没有输入任何内容，我希望捕获并抛出警报

对于JavaScript函数，我使用了参数、project_form（用于表单）和project_name作为文本框。但我不清楚的是这个函数应该放在哪里。到目前为止，我正在尝试将它放在表单标记本身中。但它不起作用。不知何故，我认为我必须将project_表单和project_name参数传递给函数，由于代码结构，我不可能将函数放在“head”部分。我正在这里粘贴代码。谢谢你的帮助

<form action="create_project.py" method="POST" name="project_form">
  <input type="text" name="project_name" size="40" onclick="javascript:document.project_form.submit.disabled=false"
  id="acpro_inp0">
  <br>
  <script type="text/javascript">
    function ValidateTextbox(project_form, project_name) {
      var tb_value = project_form.project_name.value;
      if (tb_value == null || tb_value.trim() == "") {
        alert("Please enter something");
        project_form.project_name.focus();
        return false;
      }
      return true;
    }
  </script>
  return ValidateTextbox('project_form','project_name')
  <p>
  </p>
  <input type="submit" name="submit" value="Submit" onsubmit="return ValidateTextbox('project_form','project_name')"
  disabled="">
</form>

这里是另一段Python代码，我尝试在其中动态创建JS函数

def JSTextBoxValidate(form_name,tb_name):
    print '<script type="text/javascript">'
    print 'function ValidateTextbox' + '(' + form_name + ',' + tb_name + ')'
    print '{' 
    print 'var tb_value = ' + form_name + '.' + tb_name + '.' + 'value;' 
    print 'if (tb_value==null || tb_value.trim()=="")'
    print '{' 
    print 'alert("Please enter something");'
    print form_name + '.' + tb_name + '.' + 'focus();' 
    print 'return false;'
    print '}' 
    print 'return true;'
    print '}'
    print '</script>'

def JSTextBoxValidate（表单名称，tb名称）：
打印“
打印“函数验证文本框”+（“+form_name+”、“+tb_name+”）”
打印“{”
打印'var tb_value='+表单_name+'.+tb_name+'.+'值；'
打印“如果（tb_值==null | | tb_值.trim（）==”）”
打印“{”
打印“警告（“请输入内容”）；”
打印表单_name+'.+tb_name+'.+'focus（）；'
打印“返回false；”
打印“}”
打印“返回真值；”
打印“}”
打印“

不知何故，我有一种感觉，在这个过程中，我可能没有走上正确的轨道，必须有更好的方法。所以我会感谢你帮我把这件事做好。

---

注意-yate包来自Head First Python，我正在使用并扩展该代码中的模板。我在我的项目文档中也做了类似的注释。这是我的个人项目。

以应该的方式重写HTML代码：

<script type="text/javascript">
  function ValidateTextbox(input) { //we take an object representation of the HTML <input> tag (not just a string)
    if (input.value.trim() == "") { //the attribute value is already defined in the tag now, so it couldn't be null
      alert("Please enter something");
      input.focus(); //move the cursor to the incriminated input
      return false; //preventing from submitting the form (assuming the function is called as a return value)
    }
    return true; //allowing the form to be submitted (assuming the function is called as a return value)
  }
  //function added a you seemed to need something like that
  function DisableFormSubmit(theForm, e) { //we take the form object as argument, and e may be the event object given from the keypress event
    var submitButton=theForm.submit; //to ease typing this code, the submit button is assigned to a local variable
    if(theForm.project_name.value.trim()=='') { //if we have no value for the project_name input of the form
      submitButton.disabled=true; //we disable the submit button
      submitButton.value="Submit - enter a name first"; //and we give a hint why it is disabled in the text printed on the button
    } else { //in this case project_name has a valid value
      submitButton.disabled=false; //the submit button is enabled
      submitButton.value="Submit"; //we remove the hint we gave
    }
    //processing the event now, to know what to return (key 13 is Enter, returning false on it will prevent the form from being submitted by pressing Enter)
    if(window.event) //MSIE compatibility
      return window.event.keyCode!=13;
    else if(e) //web browser's behavior
      return e.which!=13;
    }
  }
</script>
<form action="create_project.py" method="POST" name="project_form" onsubmit="return ValidateTextBox(this.project_name);">
  <input type="text" name="project_name" value="" size="40" onkeypress="return DisableFormSubmit(this.form, event);" id="acpro_inp0">
  <br>

  <input type="submit" name="submit" value="">
</form>
<script type='text/javascript'>
  DisableFormSubmit(document.forms['project_form']); //we call this function once after the <form> has loaded so that we init the submit button with a standard way
</script>

函数ValidateTextbox（input）{//我们获取HTML标记的对象表示形式（不仅仅是字符串）
如果（input.value.trim（）==“”）{//属性值现在已在标记中定义，因此不能为null
警惕（“请输入某物”）；
input.focus（）；//将光标移动到相关输入
return false；//阻止提交表单（假设函数作为返回值调用）
}
return true；//允许提交表单（假设函数作为返回值调用）
}
//功能增加了一个，你似乎需要这样的东西
函数DisableFormSubmit（theForm，e）{//我们将form对象作为参数，e可能是keypress事件中给出的事件对象
var submitButton=theForm.submit；//为了便于键入此代码，将submit按钮分配给一个局部变量
if（form.project\u name.value.trim（）=''）{//如果表单的project\u name输入没有值
submitButton.disabled=true；//我们禁用submit按钮
submitButton.value=“Submit-首先输入一个名称”；//我们在按钮上打印的文本中给出了一个为什么禁用它的提示
}else{//在本例中，项目\名称具有有效值
submitButton.disabled=false；//提交按钮已启用
submitButton.value=“Submit”//我们删除给出的提示
}
//现在处理事件，以了解返回的内容（键13为Enter，返回false将阻止按Enter键提交表单）
if（window.event）//MSIE兼容性
返回窗口.event.keyCode！=13；
else if（e）//web浏览器的行为
返回e.which！=13；
}
}


禁用表单提交（document.forms['project_form']）//我们在加载后调用此函数一次，以便以标准方式初始化submit按钮

对于Python代码，我不知道，因为我不知道这种语言，但是您不需要“动态”创建as JS函数来执行表单有效性的客户端检查。注意客户端，这意味着不安全，这意味着如果您确实需要该字段中的值，请在服务器端进行第二次检查（显然是使用Python）。你的问题是：

• 您尝试使用
  标记生成Javascript指令
• 当您实际需要HTML标记的对象表示形式时，您提供字符串作为参数：而不是提供

  'project\u form'

  和

  'project\u name'

  -注意引号-您需要类似

  document.project\u form

  或

  document.forms['project\u form']

  和前面添加了

  .project\u name

  的一个项目。注意这里缺少引号
• 您在
  中使用了属性

  onsubmit

  ，而它的位置应该在
  中（但这一点可能不是错误的原因）

---

希望这有帮助；）

“我正在使用Python和CGI开发一个web应用程序”-请不要这样做。我们有web框架是有原因的。使用它们。@DanielRoseman-谢谢并同意。一旦我完成了一个基本的PoC，我就要搬到Django了，因为我在这个方向上有点太深了。

<script type="text/javascript">
  function ValidateTextbox(input) { //we take an object representation of the HTML <input> tag (not just a string)
    if (input.value.trim() == "") { //the attribute value is already defined in the tag now, so it couldn't be null
      alert("Please enter something");
      input.focus(); //move the cursor to the incriminated input
      return false; //preventing from submitting the form (assuming the function is called as a return value)
    }
    return true; //allowing the form to be submitted (assuming the function is called as a return value)
  }
  //function added a you seemed to need something like that
  function DisableFormSubmit(theForm, e) { //we take the form object as argument, and e may be the event object given from the keypress event
    var submitButton=theForm.submit; //to ease typing this code, the submit button is assigned to a local variable
    if(theForm.project_name.value.trim()=='') { //if we have no value for the project_name input of the form
      submitButton.disabled=true; //we disable the submit button
      submitButton.value="Submit - enter a name first"; //and we give a hint why it is disabled in the text printed on the button
    } else { //in this case project_name has a valid value
      submitButton.disabled=false; //the submit button is enabled
      submitButton.value="Submit"; //we remove the hint we gave
    }
    //processing the event now, to know what to return (key 13 is Enter, returning false on it will prevent the form from being submitted by pressing Enter)
    if(window.event) //MSIE compatibility
      return window.event.keyCode!=13;
    else if(e) //web browser's behavior
      return e.which!=13;
    }
  }
</script>
<form action="create_project.py" method="POST" name="project_form" onsubmit="return ValidateTextBox(this.project_name);">
  <input type="text" name="project_name" value="" size="40" onkeypress="return DisableFormSubmit(this.form, event);" id="acpro_inp0">
  <br>

  <input type="submit" name="submit" value="">
</form>
<script type='text/javascript'>
  DisableFormSubmit(document.forms['project_form']); //we call this function once after the <form> has loaded so that we init the submit button with a standard way
</script>