手机验证的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

<style>
 span {
   color: red;
   display: none;
 }
 input {
     display: inline-block;
        margin-top: 20px;
        padding-bottom: 20px;
    }
 .yanz {
        background-color: red;
        color: aliceblue;
        width: 100px;
        text-align: center;
        line-height: 35px;
        margin-top: 20px;
    }

</style>
</head>
<body>

手机号:
<br>
<input type="text" placeholder="请输入手机号" class="iPhone">
<span>格式不正确,请重新输入</span>
<div>
    <input type="text">
    <div class="yanz">获取验证码</div>
</div>


<script>
    var span = document.querySelector('span')
    var iphone = document.querySelector('.iPhone')
    //正则表达式用来判断手机号的位数 及数字开头及结尾
    iphone.onblur = function () {
        // 判断第一位是否是1开头  第二位数字是3,4,5,6,7,8   里面是否包含0-9这些数字

        if (!/^1[34567]\d{9}$/.test(iphone.value)) {
            span.style.display = 'block'
        } else {
            // 打印输入的文本内容
            console.log(this.value)
            span.style.display = 'none'
        }
    }
</script>

</body>

</html>