身份证号：<input type="text" class="idcard"><span class="my_span"></span><script>// 身份证号码验证// 定义正则表达式let reg = /^[1-9]\d{5}(19|20)\d{2}((0[1-9]|1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/// 获取input控件并注册blur事件let card = document.querySelector('.idcard');card.addEventListener('blur',function(){// 获取class为.my_span的控件let my_span = document.querySelector('.my_span');// 使用正则表达式对input的value进行判断if(reg.test(card.value)){my_span.classList.remove('fail');my_span.innerHTML = '身份证号格式正确~'my_span.classList.add('ok');}else{my_span.classList.remove('ok');my_span.innerHTML = '身份证号格式错误~'my_span.classList.add('fail');}})</script>
<style>.ok{color: lightgreen;}.fail{color: tomato;}</style>
