javascript - 电子邮件和电话号码验证 JavaScript

Question

我想验证我的电子邮件输入文本和电话号码输入文本。在电子邮件中，我只想输入“@gmail.com”和电话号码，用户只需在表单中输入号码。我已经使用了 JavaScript，但它不起作用。

function validation() {
  var mailformat = /^\w+([\.-]?\w+)*@gmail.com*(\.\w{2,3})+$/;
  var phoneno = /^\d{10}$/;
  if (document.getElementById("name").value.length == 0) {
    document.getElementById("message").innerHTML = "<em> You did not enter your name </em>";
    return false;
  }
  if (document.getElementById("email").value.match(mailformat) != mailformat) {
    document.getElementById("message1").innerHTML = "<em> please enter </em>";
    return false;
  }
  if (document.getElementById("postcode").value.length < 4) {
    document.getElementById("message2").innerHTML = "<em> Minimum is 4 Characters for Postcode </em>";
    return false;
  }
  if (document.getElementById("phone").value.length == 0) {
    document.getElementById("message3").innerHTML = "<em> You did not enter your phone </em>";
    return false;
  }
  return true;
}

<form class="form-horizontal container" method="POST" action="#" onsubmit="return validation()">
  <!-- Name Validation input -->
  <div class="form-group">
    <label class="control-label col-md-2 label1" style="text-align: left;" for="name">Name:</label>
    <div class="col-md-5">
      <input type="text" class="form-control" id="name" placeholder="Enter Name" name="name">
      <span id="message"></span>
    </div>
  </div>
  <!-- Email Validation input -->
  <div class="form-group">
    <label class="control-label col-sm-2 label1" style="text-align: left;" for="email">Email:</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" id="email" placeholder="Enter Email" name="email">
      <span id="message1"></span>
    </div>
  </div>
  <!-- Postcode Validation Input -->
  <div class="form-group">
    <label class="control-label col-sm-2 label1" style="text-align: left;" for="postcode">Postcode:</label>
    <div class="col-sm-5">
      <input type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');" class="form-control" id="postcode" placeholder="Enter Postcode" name="postcode">
      <span id="message2"></span>
    </div>
  </div>
  <!-- Phone Validation Input -->
  <div class="form-group">
    <label class="control-label col-sm-2 label1" style="text-align: left;" for="phone">Phone:</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" id="phone" placeholder="Enter Phone" name="phone">
      <span id="message3"></span>
    </div>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-default">Submit the query</button>&nbsp;&nbsp;&nbsp;<button type="reset" class="btn btn-default button3"> Reset</button>
  </div>
</form>

Answer 1

像这样使用正则表达式

var mailformat = /^\w+([\.-]?\w+)*[@gmail.com]*(\.\w{2,3})+$/;
var email_val = document.getElementById("email").value;
if(!email_val.match(mailformat)){
document.getElementById("message1").innerHTML = "<em> please enter email dsfsdfa</em>";
return false;
}

您可以做得更好，例如在此之前对空字段应用验证。