根据用户输入动态更改错误div

Question

我想根据用户在信用卡字段中输入的位数更改错误消息。 我试图与此生成消息变量：

let numberDigit;
let creditCardMessage;

 if ($cardNumber.val().length < 13) {
   numberDigit = 'Too few digits. ';
 } else if ($cardNumber.val().length > 16) {
  numberDigit = 'Too many digits. ';
 }
creditCardMessage = numberDigit + 'Please enter between 13 and 16';

然后，我想在以下函数中传递creditCardMessage变量：

function creditCardNumberEvent () {

if (!isCreditCardValid()) {
 showErrorMessage ($cardNumber, creditCardMessage, $cardNumber, 'creditCardError');
} else {
 removeErrorMessage($cardNumber, '#creditCardError');
}
}

我得到的只是第一个值-“数字太少”。 提前致谢。

Answer 1

运行脚本时，可以调用CardNumberValid()返回一个布尔值，这意味着您可以在if语句中使用它，例如if(CardNumberValid())

 function CardNumberValid() { var valid = true; var CardNumber = $("#CardNumber"); if (CardNumber.val().length < 13) { $("#ErrorMsg").text("Too few digits. Please enter between 13 and 16"); valid = false; } else if (CardNumber.val().length > 16) { $("#ErrorMsg").text("Too many digits. Please enter between 13 and 16"); valid = false; } if(valid){ $("#ErrorMsg").text(""); } return valid; } $('#Validate').click(function() { alert("The card number " + (CardNumberValid() ? "is" : "is not") + " valid."); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="CardNumber" /> <div id="ErrorMsg" style="color:red;"></div> <button id="Validate" type="button">Validate</button> 

Answer 2

我确实知道了。 我根据建议创建了一个函数，并将该函数作为另一个函数的参数传递给了我：（我现在知道这是一个回调函数）

function creditCardMessageFunction () {

let numberDigit;
let creditCardMessage;

  if ($cardNumber.val().length < 13) {
     numberDigit = 'Too few digits. ';
  } else if ($cardNumber.val().length > 16) {
     numberDigit = 'Too many digits. ';
  } else {
    numberDigit = 'Numeric Values Only. ';
}
creditCardMessage = numberDigit + 'Please enter numbers between 13 and 16.';
return creditCardMessage;
}

Answer 3

我认为这是您要实现的目标：

 function logValidationMessage() { var cardNumber = document.getElementById('cardNumber'); var numberDigits = null; if (cardNumber.value.length < 13) { numberDigits = 'Too few digits. '; } else if (cardNumber.value.length > 16) { numberDigits = 'Too many digits. '; } else { numberDigits = 'Card number is valid.'; } console.log(numberDigits); } document.getElementById('btnCheckCardNumber').addEventListener('click', logValidationMessage); 

 <input type="text" id="cardNumber" /> <input type="button" id="btnCheckCardNumber" value="Check" />