时间戳

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

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

问题描述

完整问题：在程序使用浏览器内置的自动电子邮件输入验证功能检查用户输入的电子邮件输入是否有效后，如何使用我的按钮将用户重定向到另一个 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>

标签： javascriptcsshtmlfrontend

解决方案

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

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();
      }
    }
<!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>

推荐阅读