时间戳

首页 > 解决方案 > Luhn 算法的背景颜色 - JavaScript

javascript - Luhn 算法的背景颜色 - JavaScript

问题描述

我目前正在努力学习成为一名网络开发人员，并且有一项任务需要使用 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;
}

其他 2 个字段的我的 JS

 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}\.[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;
            }
    }

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

谢谢！

标签： javascripthtml

解决方案

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

您可以background-color有条件地更改。我已经更改了for字段的background-color内部。您可以在字段中返回或执行类似操作。letterschecknametruefalseaddEventListeneremail

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}\.[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>

推荐阅读