Javascript 自动隐藏响应消息_Javascript_Html

Javascript 自动隐藏响应消息

javascript html

Javascript 自动隐藏响应消息,javascript,html,Javascript,Html,我是JavaScript新手，我需要一些帮助上述脚本可以验证信用卡/借记卡的有效性和无效性我的问题是，当用户再次开始键入信用卡时，如何清除“无效的信用卡/借记卡号码”错误消息这就像我想在用户再次重新键入时自动清除错误消息一样 <!DOCTYPE html> <html> <head> <style> </style> </head>

我是JavaScript新手，我需要一些帮助

上述脚本可以验证信用卡/借记卡的有效性和无效性

我的问题是，当用户再次开始键入信用卡时，如何清除“无效的信用卡/借记卡号码”错误消息

这就像我想在用户再次重新键入时自动清除错误消息一样

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            
        </style>
    </head>
    <body>
        <h2>Payment
      <img style="visibility: hidden" class="mastercard" src="https://img.icons8.com/color/48/000000/mastercard.png">
      <img style="visibility: hidden" class="visacard" src="https://img.icons8.com/color/48/000000/visa.png">
      <img style="visibility: hidden" class="discovercard" src="https://img.icons8.com/color/48/000000/discover.png">
      <img style="visibility: hidden" class="amexcard" src="https://img.icons8.com/color/48/000000/amex.png">
    </h2>
    <div class="form-group">
      <label for="name-on-card">Name on Card</label>
      <input class="cc_name" type="text" name="card-name" class="form-control" placeholder="">
    </div>
    <div class="form-group">
      <label for="cc-number">Credit card number</label>
      <input type="text" class="form-control" id="cc_number" name="cc_number" placeholder="" maxlength="20">
      <span id="loginError"></span>
    </div>
    <!--<div class="">
      <select class="month_year_select" name="month" id="month">
        <option value="">exp month</option>
      </select>
    </div>
    <div class="">
      <select class="month_year_select" id="year" name="year">
        <option value="">exp year</option>
      </select>
    </div>-->
    <div class="CVV">
      <label for="cc-cvv">CVV</label>
      <input type="text" class="form-control" id="cc-cvv" name="cc-cvv" placeholder="" maxlength="4">
    </div>
       <script type="text/javascript">
        document.getElementById('cc-cvv').addEventListener('change', CWcheck); //recommended way
document.getElementById('cc_number').onchange = creditCheck; //it is OK too

function CWcheck() { //function name should conventionally start with lower case but isn't big deal
  //"this" is the element which fired the event
  if (!/^\d{3,4}$/.test(this.value)) {
    this.value = '';
    this.focus();
    alert('CVV is 3 or 4 digits');
  }
}

function creditCheck() {
  // hide cc logos
  var ccImgs = document.querySelectorAll('h2 img');
  for (var i = 0, ccImg; ccImg = ccImgs[i]; ++i) {
    ccImg.style.visibility = 'hidden';
  }
  var ccNum = this.value.replace(/\D/g, ''); //remove all non-digits
  if (ccNum.length < 15 /*15 is amex*/ || ccNum.length > 16) {
    document.getElementById("loginError").innerHTML = "invalid credit / debit card number";
    this.focus();
    return false;
  }
  //implement Luhn algorithm
  var check = ccNum.split('') //get array
    .reverse()
    .map(function(el, index) {
      return el * (index % 2 + 1); //multiply even positions by 2
    })
    .join('') //combine array of strings
    .split('')
    .reduce(function(a, b) { //sum digits
      return a + (b - 0);
    }, 0);
  if (!check || (check % 10)) { //checksum should be none-zero and dividable by 10
    document.getElementById("loginError").innerHTML = "invalid credit / debit card number";
    this.focus();
    return false;
  }
  //test passed. show card logo
  if (/^5[1-5]/.test(ccNum))
    document.querySelector('h2 img.mastercard').style.visibility = 'visible';
  else if (/^4/.test(ccNum))
    document.querySelector('h2 img.visacard').style.visibility = 'visible';
  else if (ccNum.length == 15 && /^3[47]/.test(ccNum))
    document.querySelector('h2 img.amexcard').style.visibility = 'visible';
  else if (/^6011/.test(ccNum))
    document.querySelector('h2 img.discovercasd').style.visibility = 'visible';
  //and so on
  else {
    document.getElementById("loginError").innerHTML = "invalid credit / debit card number";
    this.focus();
    return false;
  }

  //test passed. format the string
  this.value = ccNum
    .replace(/^(\d{4})(\d{4})(\d{4})(\d+)$/, '$1 $2 $3 $4');
}
    </script>
    </body>
    </html>


付款
卡片上的名字
信用卡号码
CVV
document.getElementById（'cc-cvv'）。addEventListener（'change'，CWcheck）//推荐方式
document.getElementById（'cc_number'）。onchange=creditCheck//也可以
函数CWcheck（）{//函数名按惯例应该以小写开头，但这没什么大不了的
//“this”是触发事件的元素
if（！/^\d{3,4}$/.test（this.value））{
这个值=“”；
这是focus（）；
警报（“CVV为3或4位”）；
}
}
函数creditCheck（）{
//隐藏cc徽标
var ccImgs=document.querySelectorAll（'h2 img'）；
对于（变量i=0，ccImg；ccImg=ccImgs[i]；+i）{
ccImg.style.visibility='hidden'；
}
var ccNum=this.value.replace（//\D/g'，）；//删除所有非数字
如果（ccNum.length<15/*15是美国运通*/| | ccNum.length>16）{
document.getElementById（“loginError”）.innerHTML=“无效的信用/借记卡号”；
这是focus（）；
返回false；
}
//Luhn算法的实现
var check=ccNum.split（“”）//获取数组
.reverse（）
.map（函数（el，索引）{
返回el*（索引%2+1）；//将偶数位置乘以2
})
.join（“”）//组合字符串数组
.拆分（“”）
.reduce（函数（a，b）{//和位数
返回a+（b-0）；
}, 0);
如果（！check | |（check%10））{//校验和应为非零且可除以10
document.getElementById（“loginError”）.innerHTML=“无效的信用/借记卡号”；
这是focus（）；
返回false；
}
//测试通过。显示卡片徽标
如果（/^5[1-5]/.测试（ccNum））
document.querySelector（'h2 img.mastercard'）。style.visibility='visible'；
否则，如果（/^4/.test（ccNum））
document.querySelector（'h2 img.visacard'）。style.visibility='visible'；
否则如果（ccNum.length==15&&/^3[47]/.test（ccNum））
document.querySelector（'h2 img.amexcard'）。style.visibility='visible'；
否则如果（/^6011/.test（ccNum））
document.querySelector（'h2 img.discovercasd'）。style.visibility='visible'；
//等等
否则{
document.getElementById（“loginError”）.innerHTML=“无效的信用/借记卡号”；
这是focus（）；
返回false；
}
//测试已通过。请格式化字符串
this.value=ccNum
。取代（/^（\d{4}）（\d{4}）（\d{4}）（\d+$/，“$1$2$3$4”）；
}

根据您的代码，我建议在事件处理程序中添加一行以清除错误消息：

document.getElementById('cc-cvv').addEventListener('change', function() {
    document.getElementById("loginError").innerHTML = "";
    CWcheck();
});

这将在每次读取击键时将消息重置为空字符串。当检查结果无效时，它还会显示错误消息

希望这能有所帮助。

有多种方法可以做到这一点。使用当前设置，您可以使用类来显示和隐藏错误，而不是添加innerHTML。每次更改后都可以删除此类。示例和您的代码，附件

document.getElementById（'cc-cvv'）。addEventListener（'change'，CWcheck）//推荐方式
document.getElementById（'cc_number'）。onchange=creditCheck//也可以
函数CWcheck（）{//函数名按惯例应该以小写开头，但这没什么大不了的
//“this”是触发事件的元素
if（！/^\d{3,4}$/.test（this.value））{
这个值=“”；
这是focus（）；
警报（“CVV为3或4位”）；
}
}
函数creditCheck（）{
document.getElementById（“loginError”）.classList.remove（'card-error--active'）
//隐藏cc徽标
var ccImgs=document.querySelectorAll（'h2 img'）；
对于（变量i=0，ccImg；ccImg=ccImgs[i]；+i）{
ccImg.style.visibility='hidden'；
}
var ccNum=this.value.replace（//\D/g'，）；//删除所有非数字
如果（ccNum.length<15/*15是美国运通*/| | ccNum.length>16）{
document.getElementById（“loginError”）.classList.add（'card-error--active'）
这是focus（）；
返回false；
}
//Luhn算法的实现
var check=ccNum.split（“”）//获取数组
.reverse（）
.map（函数（el，索引）{
返回el*（索引%2+1）；//将偶数位置乘以2
})
.join（“”）//组合字符串数组
.拆分（“”）
.reduce（函数（a，b）{//和位数
返回a+（b-0）；
}, 0);
如果（！check | |（check%10））{//校验和应为非零且可除以10
document.getElementById（“loginError”）.classList.add（'card-error--active'）
这是focus（）；
返回false；
}
//测试通过。显示卡片徽标
如果（/^5[1-5]/.测试（ccNum））
document.querySelector（'h2 img.mastercard'）。style.visibility='visible'；
否则，如果（/^4/.test（ccNum））
document.querySelector（'h2 img.visacard'）。style.visibility='visible'；
否则如果（ccNum.length==15&&/^3[47]/.test（ccNum））
document.querySelector（'h2 img.amexcard'）。style.visibility='visible'；
否则如果（/^6011/.test（ccNum））
document.querySelector（'h2 img.discovercasd'）。style.visibility='visible'；
//等等
否则{
document.getElementById（“loginError”）.innerHTML=“无效的信用/借记卡号”；
这是focus（）；
返回false；
}
//测试已通过。请格式化字符串
this.value=ccNum
。取代（/^（\d{4}）（\d{4}）（\d{4}）（\d+$/，“$1$2$3$4”）；
}

。卡错误{
显示：无；
}
.卡错误-激活{
显示：块；
}


付款
卡片上的名字
信用卡号码
无效的信用卡/借记卡号码
CVV

我添加了一个

[html]相关文章推荐

随机文章推荐