Question

我需要插入一个正则表达式来验证URL和电子邮件的输入是否有效，因此在代码中将其放在何处以使其正常工作而不会引起其他问题？我需要确切知道它的去向和外观。

window.onload = function() {
  document.getElementById('ifBusiness').style.display = 'none';
}

function BusinessorResidence() {
  var is_business = document.getElementById('businessCheck').checked;
  if (is_business) {
    document.getElementById('ifBusiness').style.display = 'block';
    document.getElementById('ifResidence').style.display = 'none';
  } else {
    document.getElementById('ifBusiness').style.display = 'none';
    document.getElementById('ifResidence').style.display = 'block';
  }
}

function validateForm() {
  var is_business = document.getElementById('businessCheck').checked;
  var address = document.forms["myForm"]["address"];
  var bname = document.forms["myForm"]["bname"];
  var url = document.forms["myForm"]["url"];
  var tax = document.forms["myForm"]["tax"];
  var rname = document.forms["myForm"]["rname"];
  var email = document.forms["myForm"]["email"];

  // Address always has to be checked
  if (address.value == "") {
    alert("Please enter an address.");
    address.focus();
    return false;
  }
  // Check the bname, tax and url if a business is selected
  if (is_business) {
    if (bname.value == "") {
      alert("Please enter a business name.");
      // focus() is a method, not a property, so you need to call this function to actually focus the text input.
      bname.focus();
      return false;
    }

    if (tax.value == "") {
      alert("Please enter a business tax ID.");
      tax.focus();
      return false;
    }
    if (url.value == "") {
      alert("Please enter a business URL.");
      url.focus();
      return false;
    }
  }
  // Else check the rname and the email
  else {
    if (rname.value == "") {
      alert("Please enter a residence name.");
      rname.focus();
      return false;
    }
    if (email.value == "") {
      alert("Please enter an email address.");
      email.focus();
      return false;
    }

  }
  // Open the popup window.
  // _blank refers to it being a new window
  // SELU is the name we'll use for the window.
  // The last string is the options we need.
  var popup = window.open('', 'SELU', 'toolbar=0,scrollbars=0,location=0,statusb ar=0,menubar=0,resizable=0,width=400,height=400,left=312,top=234');
  // Set the form target to the name of the newly created popup.
  var form = document.querySelector('form[name="myForm"]');
  form.setAttribute('target', 'SELU');
  return true;
}

head {
  text-align: center;
}

body {
  text-align: center;
}

.bold {
  font-weight: bold;
}

<!DOCTYPE html>
<html>

<head>
  <title>Javascript Assignment</title>
  <!-- the titles should be inside the title, not inside the <head> tag -->
  <h1>Fill the form below</h1>

  <!-- center tag is deprecated and should be replaced by CSS -->
</head>

<body>
  <form name="myForm" action="http://csit.selu.edu/cgi-bin/echo.cgi" onsubmit="return validateForm()" method="post">
    <p>
      <b>Address: </b>
      <input type="text" name="address">
    </p>
    <div>
      <div>
        <input type="radio" onclick="javascript:BusinessorResidence();" name="businessresidence" id="businessCheck">This is a Business
        <input type="radio" onclick="javascript:BusinessorResidence();" name="businessresidence" id="residenceChceck">This is a Residence
        <br>
        <div id="ifBusiness" style="display:none">
          <!-- <b> tag is deprecated. should be done with CSS -->
          <span class="bold">Business Name:</span>
          <input type="text" id="name" name="bname">
          <br>
          <span class="bold">Business Website URL:</span>
          <input type="text" id="url" name="url">
          <br>
          <span class="bold">Business Tax ID: </span>
          <input type="text" id="tax" name="tax">
        </div>
        <div id="ifResidence" style="display:none">
          <b>Name: </b>
          <input type="text" id="name" name="rname">
          <br>
          <b>Email: </b>
          <input type="text" id="email" name="email">
        </div>
      </div>
    </div>
    <input type="submit" value="Submit">
  </form>
  <hr>
  <hr>
</body>

</html>

Answer 1

要验证用户是否正在输入url /电子邮件，只需将您的输入类型更改为“ url”或“ email”，它将为您验证。

像这样：

<form name="myForm" action="http://csit.selu.edu/cgi-bin/echo.cgi" onsubmit="return validateForm()" method="post">
  <p>
    <b>Address: </b>
    <input type="text" name="address">
  </p>
  <div>
    <div>
      <input type="radio" onclick="javascript:BusinessorResidence();" name="businessresidence" id="businessCheck">This is a Business
      <input type="radio" onclick="javascript:BusinessorResidence();" name="businessresidence" id="residenceChceck">This is a Residence
      <br>
      <div id="ifBusiness" style="display:none">
        <!-- <b> tag is deprecated. should be done with CSS -->
        <span class="bold">Business Name:</span>
        <input type="text" id="name" name="bname">
        <br>
        <span class="bold">Business Website URL:</span>
        <input type="url" id="url" name="url">
        <br>
        <span class="bold">Business Tax ID: </span>
        <input type="text" id="tax" name="tax">
      </div>
      <div id="ifResidence" style="display:none">
        <b>Name: </b>
        <input type="text" id="name" name="rname">
        <br>
        <b>Email: </b>
        <input type="email" id="email" name="email">
      </div>
    </div>
  </div>
  <input type="submit" value="Submit">
</form>

插入正则表达式以验证URL地址和电子邮件地址

1 个答案: