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

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

这是HTML

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');
  }

}

名
电子邮件地址
电话号码
将您的javascript更改为：

   <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>

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

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

为了清晰起见，我附加了部分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');
      }

    }

编辑：正如Eman Z指出的，问题的第1部分并没有真正阻止代码工作，因为正在检索对象的地址（谢谢，Eman Z！），
您是否收到来自
checkForm（）的任何错误？如果有，哪些错误？可能是您试图在元素实际存在之前检索它们。您的代码是否在
中？如果是，您必须等待DOM准备就绪，或者您可以将脚本标记放在
的末尾。据我所知，没有错误。我的脚本标签都在结束正文标签之前。你能详细说明你的解决方案吗？你想实现什么？你的应用程序的哪些行为阻止你这么做？如何使用
checkForm（）
函数？我没有看到任何调用。我编辑了HTML以显示整个表单。我把onclick放在submit按钮上，我只是想在学习完全验证表单之前，让一切都正常工作。当我将“名称”字段留空时，警报（“测试”）不会显示。这不会阻止字体提交，并且根本不起作用。相反，当用户填写“名称”字段并单击“提交”按钮时，将弹出错误消息。@necka7我同意第2点和第3点。但是，该值是在checkForm函数中检索的。因此，该值将是当前值。表单仍将提交。但是，如果联系人姓名已填写，则不会弹出错误。我在函数中未看到检索命令，请详细说明。正在检索的是元素而不是值。检索值（contactName.value）时，属性将包含当前值，而不是加载的值。感谢您的响应，但它仍然不起作用。当然，我真蠢！将
onsubmit='checkForm（）'
更改为
onsubmit='return checkForm（）'
Hmm，似乎对我仍然不起作用。你能给我一个JSFIDLE吗？在这里，但它显示了带有错误消息的json，我想这是因为它的形式。您是否尝试将代码放入源文件中？如果是这样的话，行为是什么？嗯，好吧，我把代码放在表单上方的脚本标记中，它工作了。。。将“名称”字段留空后收到警报消息。我不明白为什么
function checkForm() {
  var name = document.getElementById('contact-name');   
  if (name.value == '') {
    alert('test');
    return false;
  }
}