完整问题:在程序使用浏览器内置的自动电子邮件输入验证功能检查用户输入的电子邮件输入是否有效后，如何使用我的按钮将用户重定向到另一个 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";
关于javascript - 在检查电子邮件输入验证后，如何使用我的按钮将用户重定向到另一个 HTML 页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50206912/