表单文本输入判断提示 – 天上风筝天上飞

form表单中会有文本输入，比如电话号码、邮件等，这些信息的输入都会有相应的要求，比如电话号码要求11位纯数字，那么在填写完毕时，就要判断是否是11位纯数字，如果是，则可以通过，如果不是则会有相应提醒，这里以以137开头的电话号码为例：

点击链接可以查看效果：http://www.1833233.com/tooltip/

正确输入：

错误输入：

主要代码如下：

<div class="input-info">
        <input type="text" class="info-value" placeholder="请输入数字" onblur="numIsRight()">
        <div class="tip">请输入137开头的11位电话号码!!!</div>
        <!-- <button οnblur="numRight()">发送</button> -->
    </div>
    <script>
        var infoValueNode = document.querySelector(".info-value");
        var tipNode = document.querySelector(".tip");
 
        function numIsRight() {
            var value = infoValueNode.value; //获得输入框里面的值
            console.log("value=", value);
            var reg = /^137\d{8}$/;//定义以137开头的11位电话号码的正则表达式
            var pattern = new RegExp(reg);//创建RegEXP实例
            if (!pattern.test(value)) {//test方法是检测value值是否匹配正则表达式
                infoValueNode.style.borderColor = "#F56C6C";
                tipNode.style.display = "block";
            } else {
                infoValueNode.style.borderColor = "#409eff";
                tipNode.style.display = "none";
            }
 
        }
    </script>