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表单组和表单控件类属于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

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

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

return false;

为了清楚起见，我附加了适合您的部分JavaScript：

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

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

2 个答案: