2017-04-22 101 views
1

我目前正在为学校做一些家庭作业,而且我有点儿被我的开关困住了!JavaScript信用卡验证

我在checkcard();得到响应,直到alert(card) 我的问题是,没有的情况下,将实际验证卡的类型,它是在参考过,我不能使用像jQuery等等等等任何插件 我会发布相关的代码,很高兴听到你们的声音:D我已经用####来评论这些行,以方便。另外,getcard确实会按照希望返回正确的卡片类型。

function getCard(){ 
    var cardType = "unknown"; 
    var cardTypeArray = document.getElementById("chooseCard").getElementsByTagName("input"); 


    for(var i = 0; i < cardTypeArray.length; i++){ 
     if (cardTypeArray[i].checked) { 
      cardType = cardTypeArray[i].value; 
     } 
    } 
    alert ("cardtype is" + cardType); 
    return cardType; 

} 
function checkCard(cardNumber){ 
    var errMsg = ""; 
    var card = getCard(); 
    //var cardNumber = document.getElementById("cardNumber").value; 
    var regVisa = /^4[0-9]{12}(?:[0-9]{3})?$/; 
    var regMaster = /^5[1-5][0-9]{14}$/; 
    var regAmerica = /^3[47][0-9]{13}$/; 
    alert(card); // works till here ####### 

    switch(card){ 
     case "Visa": 
      if (parseInt(cardNumber.substring(0,1)!=4) { 
       errMsg = "card number is not visa \n"; 
      } 
      break; 
     case "Mastercard": 
      if (cardNumber.substring(0,1) !=5) { 
       errMsg = "card number is not mastercard. \n"; 
      } 
     break; 
     case "AmericanExpress": 
      if (cardNumber.substring(0,2) !=51) { 
       errMsg = "card number not american express, \n"; 
      } 
      break; 


    } 
    return errMsg; 


} 
function validator(){ 

    var errMsg = "";        /* stores the error message */ 
    var result = true; 
    var visaCard = document.getElementById("visa").checked; 
    var masterCard = document.getElementById("mastercard").checked; 
    var americanExpress = document.getElementById("americanExpress").checked; 
    var cardName = document.getElementById("cardName").value; 
    //document.getElementById("cardName").setAttribute('maxlength',40); 
    var regexAlpha = /^[a-zA-Z ]+$/; 
    var cardNumber = document.getElementById("cardNumber").value; 
    var regexNum = /^[0-9]+$/; 
    var date = new Date(); 
    var todayDateMonth = date.getMonth() + 1; 
    var todayDateYear = date.getFullYear(); 
    var expMonth = document.getElementById("expMonth").value; 
    var expYear = document.getElementById("expYear").value; 
    var regVisa = /^4[0-9]{12}(?:[0-9]{3})?$/; 
    var regMaster = /^5[1-5][0-9]{14}$/; 
    var regAmerica = /^3[47][0-9]{13}$/; 


    if (todayDateMonth > expMonth || todayDateYear > expYear){ 
     errMsg += "expiry date is wrong\n"; 
     result = false; 
    } 

    if (!(visaCard || masterCard || americanExpress)){ 
     errMsg += "please select visa, mastercard or american express\n"; 
     result = false; 
    } /* assumes no errors */ 


    if (cardNumber.length > 16 || cardNumber.length < 15) 
    { 
     errMsg = errMsg + "your card number can only contain 15 to 16 digits \n"; 
     result = false; 
    }else{ 
     checkCard(cardNumber); // Starts here ####### 

    } 






    if (cardName.length > 40 || cardName.length < 1 || !regexAlpha.test(cardName)) 
    { 
     errMsg = errMsg + "your card name must only contain alpha characters \n"; 
     result = false; 
    } 
    if (errMsg != "") { 
     alert(errMsg); 
    } 
    return result; //if false the information will not be sent to the server 
} 

function init() { 
    if(document.getElementById("regform")!==null){ 
    var regForm = document.getElementById("regform");// get ref to the HTML element 
    regForm.onsubmit = validate;  
    prefill_form(); 
} 
    if(document.getElementById("bookform") !=null){ 
    var bookForm = document.getElementById("bookform"); 
    bookForm.onsubmit = validator;   /* assigns functions to corresponding events */ 
    var cancel = document.getElementById("cancelButton"); 
    cancel.onclick = cancelBooking; 
    getBooking(); 

    } 

} 
+0

太多的代码。请把这个问题归结为几十行再现你的问题。 – 2017-04-22 05:48:05

+2

你可以为我制作一个jsfiddle,并提供HTML。我会看看它。 – Bram

+0

您是否尝试过使用[debugger](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger)?如果没有,请做到这一点,看看你有多远。然后,如果您仍然有问题,请将您的帖子更新为**更具体的**问题。 –

回答

1

问题出在您看到的代码结构。交换机内部有if条件而没有任何相关联的其他条件。如果对测试条件没有太多了解,我有充分的理由相信你没有正确处理案件和条件。查找代码出错的简单方法是在您的代码中添加debugger;声明。开启您的开发工具后,您可以在大多数浏览器中按F12或通过右键单击选项来执行此操作。它应该暂停执行代码。然后有两个按钮你会看到。 1.播放按钮,将立即恢复代码执行。 2.弯曲箭头的种类,这是很重要的一个,你可以逐行执行代码,看看哪些条件已通过,哪些代码实际执行。想要发表评论,但太长,不适合。如果你有调试问题随时在这里发表评论。你可以只是谷歌开发人员工具万一你无法打开特定的窗口。

+0

您的情况在案件看起来很腥。您可以通过逐行输入完全相同的代码来验证开发工具的结果,看看它是否符合您的期望。如果它确实进入下一行。 –

+0

它是可疑的,因为我想能够使用正则表达式变量来检查卡号而不是子字符串。我尝试使用!regVisa.test(cardNumber)来代替,但得到一个错误,说.test不是一个函数。但它在验证器功能中运行良好。我将尝试调试器并再次查看代码,并返回给此处的所有人。我非常感谢这一点,谢谢 –

+0

我很抱歉地说,但你的代码根本不干净。你有两个函数定义的正则表达式,甚至没有使用它一次。这会导致你的程序中有很多不需要的代码,并且很难调试。我会建议你通过每一行,并决定是否可以做得更好?如果它是必需的?如果它在正确的地方?如果它是一个逻辑,它是正确的吗?最终你会养成编写干净的代码的习惯。并且很容易发现错误。 –

1

好吧所以问题是我没有返回错误信息或错误的结果。生病重新张贴相同的代码,但我添加了什么使它为那些感兴趣的工作。感谢您的反馈!我将在船上采取几点。无论如何代码在下面,寻找###################。

function validator(){ 

var errMsg = "";         
var result = true; 


var visaCard = document.getElementById("visa").checked; 
var masterCard = document.getElementById("mastercard").checked; 
var americanExpress = document.getElementById("americanExpress").checked; 
var cardName = document.getElementById("cardName").value; 

var regexAlpha = /^[a-zA-Z ]+$/; 
var cardNumber = document.getElementById("cardNumber").value; 
var regexNum = /^[0-9]+$/; 
var date = new Date(); 
var todayDateMonth = date.getMonth() + 1; 
var todayDateYear = date.getFullYear(); 
var expDate = document.getElementById("expDate").value; 
var dateFormat = /^[\d]{2}\/[\d]{4}$/; 





if (!dateFormat.test(expDate)){ 
    errMsg += "please select a valid date range\n"; 
    result = false; 
}else if (todayDateYear > expDate.substring(3,7)){ 
    errMsg += "please select a valid expiry year\n"; 
    result = false; 
} else if (todayDateYear == expDate.substring(3,7) && todayDateMonth > expDate.substring(0,2)){ 
    errMsg += "please select a valid expiry month\n"; 
    result = false; 
} 




if (!(visaCard || masterCard || americanExpress)){ 
    errMsg += "please select visa, mastercard or american express\n"; 
    result = false; 
} 


if (cardNumber.length > 16 || cardNumber.length < 15) 
{ 
    errMsg = errMsg + "your card number can only contain 15 to 16 digits \n"; 
    result = false; 
}else{ 
    // code below is what i added ###################################### 
    var tempMsg = checkCard(cardNumber); 
    if (tempMsg != "") { 
     errMsg = errMsg + tempMsg; 
     result = false; 
    }; 

} 







if (cardName.length > 40 || cardName.length < 1 || !regexAlpha.test(cardName)) 
{ 
    errMsg = errMsg + "your card name must only contain alpha characters \n"; 
    result = false; 
} 
if (errMsg != "") { 
    alert(errMsg); 
} 
return result; //if false the information will not be sent to the server 

}

function checkCard(cardNumber){ 
var errMsg = ""; 
var card = getCard(); 
var cvv = document.getElementById("CVV").value; 
var regVisa = /^4[0-9]{12}(?:[0-9]{3})?$/; 
var regMaster = /^5[1-5][0-9]{14}$/; 
var regAmerica = /^3[47][0-9]{13}$/; 
var cvvCheck3 =/^[0-9]{3}$/; 
var cvvCheck4 =/^[0-9]{4}$/; 




//do with if else 
switch(card){ 
    case "Visa": 
     if (!regVisa.test(cardNumber) || !cvvCheck3.test(cvv)) { 
      errMsg = "card number is not visa or cvv is wrrong \n"; 
     } 
     break; 
    case "Mastercard": 
     if (!regMaster.test(cardNumber) || !cvvCheck3.test(cvv)) { 
      errMsg = "card number is not mastercard or cvv is wrong\n"; 
     } 
    break; 
    case "AmericanExpress": 
     if (!regAmerica.test(cardNumber) || !cvvCheck4.test(cvv)) { 
      errMsg = "card number not american express or cvv is wrong, \n"; 
     } 
     break; 
     default: 
     errMsg = "we cant process this card number \n"; 
} 
return errMsg; 

}