Fatal编程技术网
  • javascript/
  • Javascript 在检查电子邮件输入验证后，如何使用我的按钮将用户重定向到另一个HTML页面？

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

javascript css html

Javascript 在检查电子邮件输入验证后，如何使用我的按钮将用户重定向到另一个HTML页面？,javascript,css,html,frontend,Javascript,Css,Html,Frontend,完整问题：在程序使用浏览器内置的自动电子邮件输入验证检查用户输入的电子邮件是否有效后，如何使用“我的”按钮将用户重定向到另一个HTML页面？我假设我必须在JavaScript中使用if/else语句 代码： <!DOCTYPE html> <html> <head> <title>Testing Web Page!</title> <link rel="stylesheet" type="text/css" href="

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


测试网页！
通过Shopify的时事通讯了解最新的电子商务趋势

订阅免费营销技巧
函数logOptions（）{
var s=document.getElementsByName（'Interests'）[0]；
var text=s.options[s.selectedIndex].text；
console.log（文本）；
}
函数logEmail（）{
log（document.getElementById（'emailinput'）.value）；
}
/*函数checkEmail（）{
如果（！document.getElementById（“emailinput”）.checkValidity（））{
警报（“输入无效！”）；
}
}
*/
函数myFunction（）{
logOptions（）；
logEmail（）；
}
对……感兴趣。。
营销
选择2
选择3
选择4
现在就报名吧
不确定您提到的“自动电子邮件输入验证”在哪里，所以我只是将重定向脚本放在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>
onkeyup事件始终检查您的输入。并验证电子邮件regex检查您的输入。我想它解决了你的要求

函数logOptions（）{
var s=document.getElementsByName（'Interests'）[0]；
var text=s.options[s.selectedIndex].text；
console.log（文本）；
}
函数logEmail（）{
log（document.getElementById（'emailinput'）.value）；
}
功能验证电子邮件（电子邮件）{
变量re=/^（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\，；：\s@“]+）*）（“+”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]124；（[a-zA Z-0-9]+]；
返回re.test（字符串（email.toLowerCase（））；
}
函数checkEmail（）{
var str=document.getElementById（“emailinput”）.value；
document.getElementById（“errorMessage”）.innerHTML=validateEmail（str）；
}
函数myFunction（）{
var str=document.getElementById（“emailinput”）.value；
if（validateEmail（str））{
logOptions（）；
logEmail（）；
}
}

测试网页！
通过Shopify的时事通讯了解最新的电子商务趋势

订阅免费营销技巧
对……感兴趣。。
营销
选择2
选择3
选择4



现在就报名吧
document.getElementById（“inputform”）.submit（）；我该把这个放在哪里？你还需要什么吗@赛义德 
if(valid)
   window.location.href="url to valid email page";
else
   window.location.href="url to error page";