Luhn 算法的背景颜色 - JavaScript

如何解决Luhn 算法的背景颜色 - JavaScript

我目前正在努力学习成为一名 Web 开发人员，并且有一项任务需要使用 luhn 算法来检查信用卡是否有效。如果它们有效，则方框变为绿色，如果无效，则方框变为红色。我在 GitHub 上找到了以下 javascript，它看起来可以满足我的需要，但我不确定如何添加代码以使框改变颜色。我相信我需要一个 if/else 语句，但我不知道如何实现它。我在想像这样的颜色变化代码：

document.getElementById(‘cardInput’).style.backgroundColor = “green”;

这是我的 html：

     <form name="form1" action="#">
       <ul>
         <li>Name:<input id="nameInput" onkeyup="letterscheck(this)" type='text' name='name' placeholder="Enter Your Name"/></li>
         <li>Email:<input id="emailInput" onkeyup="emailcheck(this)" type='text' name='email'placeholder="Enter Your Email"/></li>
         <li>Card:<input id="cardInput" onkeyup="cardnumber(this)" type='text' name='card' placeholder="Enter a Proxy Credit Card Number."/></li>
         <li class="submit"><input type="submit" name="submit" value="Submit"  /></li>
       </ul>
     </form>
   </div>

这是我在 GitHub 上找到的 JS：

function cardnumber(value) {
if (/[^0-9-\s]+/.test(value))
return false;
let nCheck = 0,bEven = false;
value = value.replace(/\D/g,“”);
for (var n = value.length - 1; n >= 0; n–) {
var cDigit = value.charat(n),nDigit = parseInt(cDigit,10);
if (bEven && (nDigit *= 2) > 9) nDigit -= 9;
nCheck += nDigit;
bEven = !bEven;
}
return (nCheck % 10) == 0;
} 

我的 JS 用于其他 2 个字段

 function letterscheck(inputtxt)
  {
    var namechecker = /^[a-zA-Z]+(?:[\s.]+[a-zA-Z]+)*$/;
    if(inputtxt.value.match(namechecker))
          {
        document.getElementById('nameInput').style.backgroundColor = "green";
        return true;
          }
        else
          {
          document.getElementById('nameInput').style.backgroundColor = "red";;
          return false;
          }
  }


  function emailcheck(inputtxt)
    {
      var emailchecker = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      if(inputtxt.value.match(emailchecker))
            {
          document.getElementById('emailInput').style.backgroundColor = "green";
          return true;
            }
          else
            {
            document.getElementById('emailInput').style.backgroundColor = "red";
            return false;
            }
    }

希望这对你们来说真的很容易！任何帮助都会很棒。

谢谢！

解决方法

该算法包含几个错误，因此我在 Stackoverflow 上搜索并找到了

您可以有条件地更改 background-color。我已将 background-color 中的 letterscheck 更改为 name 字段。您可以返回 true 或 false 并在 addEventListener 中执行此操作，就像在 email 字段中一样。

const nameInput = document.querySelector("#nameInput")
const emailInput = document.querySelector("#emailInput")
const cardNumberInput = document.querySelector("#cardInput")

function valid_credit_card(value) {
  if (/[^0-9-\s]+/.test(value)) return false;

  var nCheck = 0,nDigit = 0,bEven = false;
  value = value.replace(/\D/g,"");

  for (var n = value.length - 1; n >= 0; n--) {
    var cDigit = value.charAt(n),nDigit = parseInt(cDigit,10);

    if (bEven) {
      if ((nDigit *= 2) > 9) nDigit -= 9;
    }

    nCheck += nDigit;
    bEven = !bEven;
  }

  return (nCheck % 10) == 0;
}


function letterscheck(inputtxt) {
  var namechecker = /^[a-zA-Z]+(?:[\s.]+[a-zA-Z]+)*$/;
  if (inputtxt.match(namechecker)) {
    nameInput.style.backgroundColor = "green";
  } else {
    nameInput.style.backgroundColor = "red";;
  }
}


function emailcheck(inputtxt) {
  var emailchecker = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return inputtxt.match(emailchecker);
}

nameInput.addEventListener("keyup",e => {
  letterscheck(e.target.value);
})

emailInput.addEventListener("keyup",e => {
  const isEmailValid = emailcheck(e.target.value)
  if (isEmailValid) {
    e.target.style.backgroundColor = "green";
  } else {
    e.target.style.backgroundColor = "red";
  }
})

cardNumberInput.addEventListener("keyup",e => {
  const isCardValid = valid_credit_card(e.target.value);
  if (isCardValid) {
    cardNumberInput.style.backgroundColor = "green";
  } else {
    cardNumberInput.style.backgroundColor = "red";
  }
})

li {
  list-style-type: none;
}

input {
  margin: .25rem 1rem;
}

<form name="form1" action="#">
  <ul>
    <li>Name:<input id="nameInput" type='text' name='name' placeholder="Enter Your Name" /></li>
    <li>Email:<input id="emailInput" type='text' name='email' placeholder="Enter Your Email" /></li>
    <li>Card:<input id="cardInput" type='text' name='card' placeholder="Enter a Proxy Credit Card Number." /></li>
    <li class="submit"><input type="submit" name="submit" value="Submit" /></li>
  </ul>
</form>