使用 Javascript 验证表单（简单测试）

Question

var name = document.getElementById('contact-name'),
    email = document.getElementById('contact-email'),
    phone = document.getElementById('contact-phone'),
    message = document.getElementById('contact-message');


function checkForm() {
  if (name.value == '') {
    alert('test');
  }

}

在开始学习实际的客户端验证之前，我只是想确保一切正常。

这里是 HTML

   <form role='form' name='contactForm' action='#' method="POST" id='contact-form'>

          <div class="form-group">
            <label for="contact-name">First and Last Name</label>
            <input type="text" class="form-control" id="contact-name" name="contactName" placeholder="Enter your name.." pattern="[A-Za-z]+\s[A-Za-z]+">
          </div>

          <div class="form-group">
            <label for="contact-email">Email address</label>
            <input type="email" class="form-control" id="contactEmail" name="contactEmail" placeholder="Enter Email" required>
          </div>

          <div class="form-group">
            <label for="contact-phone">Phone Number</label>
            <input type="number" class="form-control" id="contactPhone" name="contactPhone" placeholder="Enter Phone Number"  required'>
          </div>   

          <div class="form-group">
            <label for='contactMessage'>Your Message</label>
            <textarea class="form-control" rows="5" placeholder="Enter a brief message" name='contactMessage' id='contact-message' required></textarea>
          </div>

        <input type="submit" class="btn btn-default" value='Submit' onclick='checkForm()'>
      </fieldset>
      </form>

我取消了必需的属性，如果我将名称字段留空，当我单击提交时它会直接转到另一个。为了检查 javascript 是否正常工作，我做了一个基本的 onclick 函数。

也许有人可以向我解释 checkForm 函数有什么问题。提前致谢。

P.S form-group 和 form-control 类属于 bootstrap

Answer 1

将您的 javascript 更改为：

   var contactName = document.getElementById('contact-name'),
       email = document.getElementById('contact-email'),
       phone = document.getElementById('contact-phone'),
       message = document.getElementById('contact-message');


    function checkForm() {
      if (contactName.value === '') {
        alert('test');
      }

    }

Answer 2

好的，霍布斯，感谢您编辑您的问题，现在我可以理解您的问题了。 您的代码面临三个两个问题。

1. 您的控制流。如果要验证字段，则必须在验证时获取其值。您改为在页面加载时填充变量名称，但用户只会在此之后输入文本。因此，您需要将 var someVariableName = document.getElementById(...); 添加到 checkForm() 函数的开头。
2. 全局变量。请不要这样使用它们，尽可能避免使用全局变量是一个很好的设计，否则你会给自己带来引入副作用的危险（或遭受它们的影响，这发生在你的情况下）。全局上下文窗口已经包含一个变量name，您不能覆盖它。在您的控制台中查看window.name。您当然可以在函数或块中使用var name = ...。
3. 即使您解决了上述问题，您仍然会提交表单。如果您以return false; 结束您的checkForm() 函数，您可以阻止表单提交

为清楚起见，我附加了应该为您工作的部分 javascript：

function checkForm() {
  var name = document.getElementById('contact-name');   
  if (name.value == '') {
    alert('test');
    return false;
  }
}

编辑：正如 Eman Z 指出的那样，问题的第 1 部分并没有真正阻止代码工作，因为正在检索对象的地址（感谢 Eman Z！），