[英]How do I redirect the user to another HTML page using my button after checking for email input validation?
完整问题：在程序使用浏览器中内置的自动电子邮件输入验证检查程序输入的用户输入的电子邮件是否有效之后，如何使用我的按钮将用户重定向到另一个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>
不知道您提到的“自动电子邮件输入验证”在哪里，所以我只是将重定向脚本放在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";
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>
我希望我的 html 页面在我提交某个输入时重定向到另一个 html 页面我该怎么做
[英]I want my html page to redirect to another html page when I submit a certain input how can i do that
如何制作HTML按钮，既可以将用户重定向到新的.html页面，又可以使用.value保存来自表单输入的数据？
[英]How do I make an HTML-button both redirect the user to a new .html-page whilst also saving data from form input using .value?
Javascript：如何在检查用户是否输入特定单词后重定向到 url 或另一个 url？
[英]Javascript: how can I redirect to a url or another url after checking if user input specific words?
使用 javascript 验证后无法重定向到另一个 html 页面
[英]Unable to redirect to another html page after validation using javascript
如何让按钮将我的页面重定向到另一个页面（取决于输入）
[英]How can I make a button redirect my page to another page (depending on the input)
用户输入正确密码后，如何使提交按钮重定向到另一个页面？
[英]How do you make a submit button redirect to another page after the user has inputted the correct password?
用户输入正确的用户名和密码后，如何使提交按钮重定向到另一个页面？
[英]How do you make a submit button redirect to another page after the user has inputted the correct username and password?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.