手机号码表单校验

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>