验证代码

时间:2016-05-31 18:46:36

标签: javascript twitter-bootstrap

我在bootstrap中开发了一些代码,我在验证字段(名称,电子邮件)时收到错误。请帮帮我。

这是表格的代码:

<div class="container">
  <h3 class="text-center">CONTACT</h3>
  <p class="text-center"><em>I love my Fans!</em></p>
  <div class="row test">
    <div class="col-md-4">
      <p><span class="glyphicon glyphicon-map-marker"></span>4429, Rainier Street, Irving, Texas ,United States</p>
      <p><span class="glyphicon glyphicon-phone"></span>Phone:Phone</p>
      <p><span class="glyphicon glyphicon-envelope"></span>Email: Email</p>
    </div>
    <div class="col-md-8">
      <div class="row">
        <div class="col-sm-6 form-group">
          <input class="form control" id="name" placeholder="Name" type="text" onBlur="txt_Blur(this,'errorName')" />
          <span id="errorName" style="display:none;">Please enter a valid name!</span>
        </div>
        <div class="col-sm-6 form-group">
          <input class="form control" id="email" name="email" placeholder="Email" type="email" required>
          <span id="errorName" style="display:none;">Please enter a valid email!</span>
        </div>
      </div>
      <div class="textarea">
        <textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea>
        <span id="errorName" style="display:none">Please enter your comments!</span>
      </div>
      <br>
      <div class="row">
        <div class="col-md-12 form-group">
          <button class="btn pull-right" type="submit" onclick="button_Click()">Send</button>
        </div>
      </div>
    </div>
  </div>
</div>

下面的验证JavaScript:

function txt_Blur(ref, errorId) {
  if (ref.value == "") {
    document.getElementById(errorId).style = "color:red;";
  } else {
    document.getElementById(errorId).style = "display:none;";
  }
}

function button_Click() {
  if (document.getElementById("name")).value == "") {
    document.getElementById("errorName").style = "color:red;";
  } else {
    document.getElementById("errorName").style = "display:none;";
  }
  if (document.getElementById("email")).value == "") {
    document.getElementById("errorName").style = "color:red;";
  } else {
    document.getElementById("errorName").style = "display:none;";
  }
}

当有人试图将名称字段留空并转到下一个文本字段(电子邮件)时,我需要显示错误。

0 个答案:

没有答案