Question

完整问题：在程序使用浏览器内置的自动电子邮件输入验证检查用户输入的电子邮件输入是否有效后，如何使用我的按钮将用户重定向到另一个HTML页面？我假设我必须在JavaScript中使用if / else语句？

代码：

<!DOCTYPE html>
<html>

<head>
  <title>Testing Web Page!</title>
  <link rel="stylesheet" type="text/css" href="web.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <h2>Stay up to date with ecommerce trends <br>with Shopify's newsletter</h2>
  <h4>Subscribe for free marketing tips</h4>

  <script>
    function logOptions() {
      var s = document.getElementsByName('Interests')[0];
      var text = s.options[s.selectedIndex].text;
      console.log(text);
    }

    function logEmail() {
      console.log(document.getElementById('emailinput').value);
    }

    /*  function checkEmail(){
        if(!document.getElementById("emailinput").checkValidity()){
          alert("input not valid!");
        }
      }
    */

    function myFunction() {
      logOptions();
      logEmail();
    }
  </script>


  <!-- <div class="input form"> -->
  <form id="inputform">
    <input id="emailinput" type="email" placeholder="Email Address">
    <span id='errorMessage'></span>
    <select name="Interests">
        <option value="" disabled selected>Interested in..</option>
        <option value="option1">Marketing</option>
        <option value="option2">Option2</option>
        <option value="option3">Option3</option>
        <option value="option4">Option4</option>
      </select>
  </form>


  <!-- Sign up now button -->
  <div id="container">
    <button id="submitButton" form="inputform" onclick="myFunction()">Sign up now</button>
  </div>

  <svg>
  <rect width="40" height="3" style="fill:lightgreen" />
  </svg>


</body>



</html>

Answer 1

不确定这个＆＃34;自动电子邮件输入验证＆＃34;你提到的，所以我只是将重定向脚本放在myFunction中。

如果您尝试它，当您单击按钮时它将重定向到stackoverflow。

<!DOCTYPE html>
<html>

<head>
  <title>Testing Web Page!</title>
  <link rel="stylesheet" type="text/css" href="web.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <h2>Stay up to date with ecommerce trends <br>with Shopify's newsletter</h2>
  <h4>Subscribe for free marketing tips</h4>

  <script type="text/javascript">
    function logOptions() {
      var s = document.getElementsByName('Interests')[0];
      var text = s.options[s.selectedIndex].text;
    }

    function logEmail() {
      console.log(document.getElementById('emailinput').value);

    }

    /*  function checkEmail(){
        if(!document.getElementById("emailinput").checkValidity()){
          alert("input not valid!");
        }
      }
    */

    function myFunction() {
      logOptions();
      logEmail();
      window.location.href = "http://stackoverflow.com";
      return false;
    }
  </script>


  <!-- <div class="input form"> -->
  <form id="inputform">
    <input id="emailinput" type="email" placeholder="Email Address">
    <span id='errorMessage'></span>
    <select name="Interests">
        <option value="" disabled selected>Interested in..</option>
        <option value="option1">Marketing</option>
        <option value="option2">Option2</option>
        <option value="option3">Option3</option>
        <option value="option4">Option4</option>
      </select>
  </form>


  <!-- Sign up now button -->
  <div id="container">
    <button id="submitButton" form="inputform" onclick="return myFunction();">Sign up now</button>
  </div>

  <svg>
  <rect width="40" height="3" style="fill:lightgreen" />
  </svg>


</body>



</html>

稍后如果你已经有了验证方法，你可以使用这样的东西

if(valid)
   window.location.href="url to valid email page";
else
   window.location.href="url to error page";

Answer 2

onkeyup事件总是检查您的输入。并验证电子邮件正则表达式检查您的输入。我认为它解决了你的要求。

＆＃13;

function logOptions() {
      var s = document.getElementsByName('Interests')[0];
      var text = s.options[s.selectedIndex].text;
      console.log(text);
    }

    function logEmail() {
      console.log(document.getElementById('emailinput').value);
    }
    
    function validateEmail(email) {
        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(String(email).toLowerCase());
    }

    function checkEmail(){
		var str = document.getElementById("emailinput").value;
		document.getElementById("errorMessage").innerHTML = validateEmail(str);
    }

    function myFunction() {
      var str = document.getElementById("emailinput").value;
      if(validateEmail(str)){
        logOptions();
        logEmail();
      }
    }

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Testing Web Page!</title>
  <link rel="stylesheet" type="text/css" href="web.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <h2>Stay up to date with ecommerce trends <br>with Shopify's newsletter</h2>
  <h4>Subscribe for free marketing tips</h4>

  <!-- <div class="input form"> -->
  <form id="inputform">
    <input id="emailinput" type="email" placeholder="Email Address" onkeyup="checkEmail()">
    <span id='errorMessage'></span>
    <select name="Interests">
        <option value="" disabled selected>Interested in..</option>
        <option value="option1">Marketing</option>
        <option value="option2">Option2</option>
        <option value="option3">Option3</option>
        <option value="option4">Option4</option>
      </select>
  </form>
<br><br>

  <!-- Sign up now button -->
  <div id="container">
    <button id="submitButton" form="inputform" onclick="myFunction()">Sign up now</button>
  </div>

</body>
</html>

＆＃13;

在检查电子邮件输入验证后，如何使用我的按钮将用户重定向到另一个HTML页面？

2 个答案: