无法使用 javascript 重定向答案

【问题标题】：Cannot redirect using javascript无法使用 javascript 重定向
【发布时间】：2020-05-23 12:03:00
【问题描述】：

我有一个验证信用卡凭据的页面。在我需要将用户重定向到另一个页面之前，一切都很好。

function vNumarCard(numar)
{
    console.log(numar);
  var cardno = /^(?:4[0-9]{12}(?:[0-9]{3})?)$/;
  if(!numar.match(/^(?:4[0-9]{12}(?:[0-9]{3})?)/))
        {
      return false;
        }
      else
        {
        
        return true;
        }
}

function vDataExp(data){
    console.log(data);
    if(!data.match(/(0[1-9]|1[0-2])[/][0-9]{2}/)){
        
        return false;
    }
    else{
        
        var d = new Date();
        var anCurent = d.getFullYear();
        var lunaCurenta = d.getMonth() + 1;
        var parti = data.split('/');
        var an = parseInt(parti[1], 10) + 2000;
        var luna = parseInt(parti[0], 10);
         if (an < anCurent || (an == anCurent && luna < lunaCurenta)) {
             alert("Card expirat!")
            return false;
         }
         
         return true;

}
}

function vCVC(cvc){
    console.log(cvc);
    if(!cvc.match(/[0-9][0-9][0-9]/)){
        
        return false;
    }
    else{
        return true;
    }
}

function verCard(numar,data,cvc){
    if(vNumarCard(numar)==true&&vDataExp(data)==true&&vCVC(cvc)==true){
        alert('inside if');
        location.href = '/success.html';
    }
    else if(vNumarCard(numar)==false) alert("Numarul cardului este invalid!");
        else if(vDataExp(data)==false) alert("Data expirarii este invalida");
            else alert("CVC incorect!");
}

function verDate(){
    var numar = document.getElementsByName("numarCard")[0].value;
    var data = document.getElementsByName("dataExp")[0].value;
    var cvc = document.getElementsByName("codCVC")[0].value;

    verCard(numar,data,cvc);
}

<!DOCTYPE html>
<html lang="ro">
<head>
	<title>Cumpara</title>
<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/scss/bootstrap.css">
	
</head>
<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-center">
				<ul class="navbar-nav">
					<li class="nav-item">
						<a class="nav-link" href="index.html">Acasă</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="modele.html">Modele</a>
					</li>
					
					<li class="nav-item">
						<a class="nav-link" href="galerie.html">Galerie</a>
					</li>
					<li class = "nav-item">
						<a href="cos.html" class = "nav-link">
          					<span class="glyphicon">&#128722;</span>
       					 </a>
					</li>
				</ul>
				
	</nav>

<div class="container">
	<div class="row">
		<div class="col-sm-4">
		</div>
		<div class="col-sm-4">
			<h2 style="text-align: center;">Cumpara produsele selectate</h2>
			<form method="POST">
				
				<div class="form-group">
					<label for="email">
						Email:
					</label>
					<input type="email" name="email" class="form-control" placeholder="Email">
					
				</div>
				<div class="form-group">
					<label for="numeCumparator">
						Nume:
					</label>
					<input type="text" name="numeCumparator" class="form-control" placeholder="Nume">
					
				</div>
				<div class="form-group">
					<label for="numarCard">
						Numar Card:
					</label>
					<input type="text" name="numarCard" class="form-control" placeholder="1234 1234 1234 1234">
					
				</div>
				<div class="form-group">
					<label for="dataExp">
						Data de expirare:
					</label>
					<input type="text" name="dataExp" class="form-control" placeholder="ll/aa">
					
				</div>
				<div class="form-group">
					<label for="codCVC">
						CVC:
					</label>
					<input type="text" name="codCVC" class="form-control" placeholder="CVC">
					
				</div>
				<button name="cumpara" type="submit" class="btn btn-success btn-lg btn-block" onclick="verDate();">Cumpara</button>
			</form>
		</div>
		<div class="col-sm-4"></div>
	</div>
</div>

<script src="node_modules/jquery/dist/jquery.min.js"></script>
	<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
	<script src="scripturi/cumpara.js"></script>
</body>
</html>

每个功能都正常工作，我检查了每个功能，并使用警报查看 if 是否有效并且确实有效。我在其他页面上使用了相同的方法，效果很好，但 location.href 不起作用。我也尝试过 document.location.href 和 window.location 但我得到了相同的结果。实际发生的是相同的页面被重新加载而不是被重定向。

【问题讨论】：

只是一个提示，不回答问题。不需要输入 vNumarCard(numar) == true，你可以写 fun1() && fun2() && fun3()
项目中的success.html在哪里？试试"/success.html"
感谢您的提示！ success.html 位于同一位置。
“不起作用”不是一个有用的描述（如果它起作用你不会问）。你检查过你的浏览器开发者工具吗？
我已经检查过了，没有任何错误或警告。而且我不知道如何比以前更好地解释这个问题。

标签： javascript html

【解决方案1】：

点击提交按钮时，您的表单会被提交。由于您的表单没有 action 属性，因此表单会被提交到当前 URL，这就是重新加载同一页面的原因。事件处理程序在默认操作（表单提交）之前执行，因此即使您尝试在事件处理程序中重定向，它也会被表单提交覆盖，这就是重定向被取消的原因。

解决办法是阻止表单提交。首先，您应该在表单上使用onSubmit 侦听器，而不是在按钮上使用onClick 侦听器。您不必这样做，但它被认为是一种很好的做法，并且有助于提高可访问性。
您需要将 event 参数传递给您的函数，如下所示：

<form onSubmit="verDate(event);">

在您的 verDate() 函数中，您现在使用该事件对象来阻止表单提交，如下所示：

function verDate(event){
    event.preventDefault();
    var numar = document.getElementsByName("numarCard")[0].value;
    var data = document.getElementsByName("dataExp")[0].value;
    var cvc = document.getElementsByName("codCVC")[0].value;

    verCard(numar,data,cvc);
}

这应该可以解决您的问题，但我还想建议一种更简洁的方法，而不是显式重定向，而是将成功页面设置为表单的操作属性（即<form action="/success.html">）和而不是在表单有效时重定向，而是在表单无效时运行event.preventDefault()仅。这是处理表单的正确方法，尽可能利用默认行为。

另外，专业提示：如果您想在 JS 作业中获得更高的分数，请使用 addEventListener() 添加您的事件侦听器，而不是将它们添加为 HTML 中的内联属性。

【讨论】：

【解决方案2】：

您应该为您的功能使用return true

function vNumarCard(numar) {
 //validation code
 return true;
 }

function vDataExp(data) {
 //validation code
 return true;
 }

function vCVC(cvc) {
 //validation code
 return true;
 }

然后你可以使用这个：

if ( vNumarCard(numar) && vDataExp(data) && vCVC(cvc) ) {
  location.href = 'success.html';
}

【讨论】：

【解决方案3】：

<button name="cumpara" type="submit" onclick="verDate();">Cumpara</button>

你有一个按钮有两个工作：

运行您的代码（验证 + 重定向）
提交表格

所以我猜浏览器正在做这两件事。由于这两个动作都涉及加载（不同的）页面，因此只有最后一个成功完成“获胜”的页面。

如果您真的不打算将表单数据提交到服务器，您应该将type="submit" 属性更改为type="button"。

在任何情况下，都不清楚为什么你首先要有一个表单，因为你似乎完全放弃了它的值。我想您还有一些尚未共享的其他进程（例如 AJAX 调用）。

【讨论】：

感谢您的回答，但似乎并没有解决问题。表单背后的故事是，对于我必须制作的项目，我需要从用户那里获取并检查数据。一开始我用的是php，后来发现php部分是不会评分的，所以只好用javascript重新制作。
去掉type 属性将无济于事，因为表单中的按钮默认为submit 类型。他需要明确设置type="button" 才能使其工作。顺便说一句，当你有表单元素时使用表单总是一个好处，因为它有助于可访问性和此类元事物，所以最好“装饰”表单以按照你想要的方式行事并可能优雅地降级，而不是在上下文中不工作完全是一种形式。