正则表达式验证身份证号码

身份证号：<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>