Как перенаправить пользователя на другую HTML-страницу с помощью моей кнопки после проверки правильности ввода по электронной почте? - PullRequest
Новая
       6

Как перенаправить пользователя на другую HTML-страницу с помощью моей кнопки после проверки правильности ввода по электронной почте?

0 голосов
/ 07 мая 2018

Полный вопрос: Как перенаправить пользователя на другую HTML-страницу с помощью моей кнопки после того, как программа проверит, является ли введенный пользователем адрес электронной почты действительным, используя автоматическую проверку ввода электронной почты, встроенную в браузер? Я предполагаю, что мне придется использовать оператор if / else в JavaScript?

Код: 

<!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>

Ответы [ 2 ]

0 голосов
/ 07 мая 2018

Событие 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>
0 голосов
/ 07 мая 2018

не уверен, где эта «автоматическая проверка ввода электронной почты», о которой вы упоминаете, поэтому я просто поместил скрипт перенаправления в myFunction.

Если вы попробуете это, он будет перенаправлен в стек, когда вы нажмете кнопку. 

<!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";
...