Question

基本上我想要验证这个表单，我正在尝试使用Traceback (most recent call last): File "/Users/luccaportes/PycharmProjects/Multiplicator_Matrix/Main.py", line 54, in <module> m = Multiplicator(matrix_1, matrix_2, queue,0) File "/Users/luccaportes/PycharmProjects/Multiplicator_Matrix/multiplicator.py", line 7, in __init__ mutex_mult.acquire() NameError: name 'mutex_mult' is not defined，但它无法正常工作，任何人都可以帮助我，为什么它不会像我正在尝试的那样。

document.getElementByid();

Answer 1

要获取字段的值，您必须访问元素的.value字段，如下所示：document.getElementById('demo').value。

为了捕获submit事件，您必须在表单上设置onsubmit函数，如下所示：

document.getElementById("myform").onsubmit = validate;

在验证功能中，如果输入无效，则必须调用return false;：

if (txt === null || txt.trim() === '') {
    alert("Name can't be left blank");
    return false;
}

此外，如果您正在进行验证，请查看pattern元素的required和input属性。所有现代浏览器都会遵守您使用这些属性设置的规则，并且您不必手动验证它。

https://www.w3schools.com/tags/att_input_pattern.asp https://www.w3schools.com/tags/att_input_required.asp

Answer 2

@ user337554是正确的，我只想向您展示另一种方法，当我们关注表格/字段处理时，这是有效的。

使用JavaScript的传统形式，你可以介意使用表单的onsubmit事件来触发验证并等待它返回继续或不使用你想要的POST / GET。

DOM节点结构使您能够使用document.form_name.field_name之类的名称来访问字段。

在我的示例中，我将表单本身作为参数传递给验证函数，因此您将把它作为具有所有功能和子项的本机DOM表单对象来处理。

希望它可以帮助您了解代码中的可能性，我喜欢它，因为我可以使它更清洁，我可以使用DOM树而不是数百万getElementByID。

您可以运行以下代码，它可以运行：

/**
 * Triggered by the form's onsubmit event
 */
function validate(form)
{
  console.info("Beginning the validation..");
  
  // Validating the fields by the DOM nodes sequence from form to input names
  if(form.demo.value == "")
  {
      alert("Name can't be left blank");
      return false; // Quit the POST
  }

  if(form.email.value == "")
  {
      alert("E-mail can't be left blank");
      return false; // Quit the POST
  }

  if(form.pwd.value == "")
  {
      alert("Password can't be left blank");
      return false; // Quit the POST
  }

  if(form.phone.value == "")
  {
      alert("Phone can't be left blank");
      return false; // Quit the POST
  }
  
  console.info("Finished!");
  
  // Form is OK
  return true;
}

<form action="#" name="simple" action="POST" onsubmit="return validate(this)">

  <label for="name">
      Name:
  </label>
  <input type="text" id="demo" name="demo" class="form-control"><br>

  <label for="email">
      E-mail:
  </label>
  <input type="email" id="email" name="email" class="form-control"><br>

  <label for="pwd">
      Password:
  </label>
  <input type="password" id="pwd" name="pwd" class="form-control"><br>

  <label for="phone">
      Phone:
  </label>
  <input type="text" id="phone" name="phone" class="form-control"><br>

  <!--
  IT'S WRONG, YOU HAVE 2 TYPES HERE, USE SUBMIT TO INTERCEPT THE EVENT
  <input type="button" type="submit" value ="Submit" class="form-control" >
  -->
  <input type="submit" value ="Submit" class="form-control" >

  <input type="button" type="reset" value="Reset" class="form-control">
</form>

Answer 3

使用此

function validate() {
  txt = document.getElementById("demo");
  alert(txt);
  if(txt.value.trim() == "" || txt.value == null)
  {
      alert("Name can't be left blank");
  }
}

注意：关键字var在txt变量之前不存在。 value获取ID为demo的输入字段的值。 trim()函数修剪前导/尾随空格以确保输入不仅仅是空格字符。

用javascript验证html表单

3 个答案: