html
<input class="ipt space" placeholder="请输入您的手机号码" type="text" id="phone">
<p id="phone-wrong" class="form-checking">请输入正确的手机号码</p>
css
.ipt-checking {
background: #ffffff;
border: 1px solid #ff0000;
}
.form-checking {
font-size: 12px;
color: #ff0000;
line-height: 12px;
display: none;
}
js
<script src="/js/jquery-3.5.1.js"></script>
//根据自己存放路径引入jquery包
<script>
//手机号 失去焦点事件
$('#phone').blur(function() {
var reg = /^1[34578]\d{9}$/;
if (!reg.test($("#phone").val())) {
$("#phone").addClass('ipt-checking')
$("#phone-wrong").css('display', 'block')
} else {
$("#phone").removeClass('ipt-checking')
$("#phone-wrong").css('display', 'none')
}
})
</script>