时间戳

首页 > 解决方案 > Javascript卡凭证验证问题

javascript - Javascript卡凭证验证问题

问题描述

我需要制作一个页面来验证项目的信用卡（签证）上的凭据。我已经创建了所需的 javascript 和 html，但我认为我没有很好地将它们结合在一起。我也有此错误消息enter image description here 我相信代码应该没问题，但如果它不好请纠正我。我对javascript很陌生。

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

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

}
    return true;
}

function vCVC(cvc){
    if(!cvc.match(/[0-9][0-9][0-9]/)){
        alert("CVC incorect!");
        return false;
    }
    else{
        return true;
    }
}

function verCard(numar,data,cvc){
    if(vNumarCard(numar)==true&&vDataExp(data)==true&&vCVC(cvc)==true){
        location.href = "success.html";
    }
}

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

    verCard(numar.value,data.value,cvc.value);
}
<!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="categorii.html">Categorii</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">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>

标签： javascripthtmlbootstrap-4

解决方案

getElementsByName()返回节点列表，而不是单个项目。改变

var numar = document.getElementsByName("numarCard").value;

（以及其他两条类似的行），以：

var numar = document.getElementsByName("numarCard")[0].value;

或者

var numar = document.querySelector("[name=numarCard]").value;

推荐阅读