javascript - 如何将值传递给函数并继续执行

Question

我有一个表单，正在验证“onblur”字段。我想做的是，当用户单击“提交”时，使任何字段为空。

我试图做的是将值传递给函数并在用户单击“提交”时运行该函数，但我在执行此操作时遇到问题。

有人可以指出我如何解决问题的正确方向吗？

HTML:

<form method="post" name="registerForms" >
  <div class="form-group">
    <label for="nusernames">Username: <span id="nusernamesErr" class="error">* </span></label>
    <input type="text" class="form-control" id="nusernames" name="nusernames" onblur="validateForm('nusernames')">
  </div>
  <div class="form-group">
    <label for="nemail">Email: <span id="nemailErr" class="error">* </span></label>
    <input type="email" class="form-control" id="nemail" name="nemail" onblur="validateForm('nemail')">
  </div>
  <input type="submit" class="btn btn-default" value="Submit" id="registerButton"> 
</form>

JS:

function validateForm(id)
{
    var value = document.getElementById(id).value; 
    var ok = true;

    if(value === "" || value == null)
    {
        document.getElementById(id+'Err').innerHTML = "* <img src='images/unchecked.gif'> Field is required";
        ok = false 
        yesNo(ok);
    }
    else
    {
        document.getElementById(id+'Err').innerHTML = "* ";
    } 
}

var button = document.getElementById('#registerButton');

button.onclick = function yesNo(ok)
{
    alert("There's something wrong with your information!")
    if(ok == false)
    {
        alert("There's something wrong with your information!")
        return false;
    }
}

Answer 1

如果您想在提交按钮的点击事件上附加验证，我建议您像在模糊事件上一样对每个输入字段重复验证。

此外，我建议您将 ok 值保存为每个输入字段的属性。将 dom Ready 处的这些属性设置为 false，并在 validateForm 函数中将其更改为 true/false。

提交时，最好运行验证器函数并测试错误字段。

您可以使用addEventListener为了注册事件处理程序，querySelectorAll用于选择元素。

代码片段:

function validateForm(id) {
  var value = document.getElementById(id).value;

  if (value === "" || value == null) {
      document.getElementById(id+'Err').innerHTML = "* <img src='images/unchecked.gif'> Field is required";
      document.getElementById(id).setAttribute('yesNo', 'false');
  } else {
      document.getElementById(id+'Err').innerHTML = "* ";
      document.getElementById(id).setAttribute('yesNo', 'true');
  }
}

document.addEventListener('DOMContentLoaded', function(e) {
  document.querySelectorAll('form[name="registerForms"] input:not([type="submit"])').forEach(function(ele, idx) {
      ele.setAttribute('yesNo', 'false');
  });
  document.getElementById('registerButton').addEventListener('click', function(e) {

      var ok = true;

      document.querySelectorAll('form[name="registerForms"] input:not([type="submit"])').forEach(function(ele, idx) {
          validateForm(ele.id);
          if (ele.getAttribute('yesNo') == 'false') {
              ok = false;
          }
      });

      if (ok == false) {
          console.log("There's something wrong with your information!")
          e.preventDefault();
      }
  });
});

<form method="post" name="registerForms" action="http://www.google.com">
    <div class="form-group">
        <label for="nusernames">Username: <span id="nusernamesErr" class="error">* </span></label>
        <input type="text" class="form-control" id="nusernames" name="nusernames" onblur="validateForm('nusernames')">
    </div>
    <div class="form-group">
        <label for="nemail">Email: <span id="nemailErr" class="error">* </span></label>
        <input type="email" class="form-control" id="nemail" name="nemail" onblur="validateForm('nemail')">
    </div>
    <input type="submit" class="btn btn-default" value="Submit" id="registerButton">
</form>