jquery手机号码正则验证

全栈程序员站长

发布于 2022-08-12 17:16:54

1.3K00

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <style>
        .item-label{
            height: 30px;
            line-height:30px ;
            float: left;
        }
        input {
            height: 30px;
            line-height: 30px;
            background-color: transparent;
            text-align: right;
            width: 170px;
            padding: 0;
            font-size: 14px;
        }
        input::-webkit-input-placeholder {
            color: #999;
        ;
        }

        input::-moz-input-placeholder {
            color: #999;
        ;
        }

        input::-ms-input-placeholder {
            color: #999;
        ;
        }

        input::-o-input-placeholder {
            color: #999;
        ;
        }
    </style>
</head>
<body>
<label class="item-label">
    姓名：</label>
<div class="item-cont item-text">
    <input name="name" id="name" type="text" placeholder="请输入您的姓名">
</div>
<label class="item-label">
    手机：</label>
<div class="item-cont item-text">

    <input name="mobile" id="mobile" type="tel" placeholder="请输入您的电话" maxlength="11" >
</div>
<button class="btn">提交</button>
</body>
</html>
<script>
    //解决IE10以下的placeholder问题
    function placeholderSupport() {
        return 'placeholder' in document.createElement('input');
    }
    if (!placeholderSupport()) {   // 判断浏览器是否支持 placeholder
        $("[placeholder]").each(function () {
            var _this = $(this);
            var left = _this.css("padding-left");
            _this.parent().append('<span class="placeholder" data-type="placeholder" style="position:absolute;height: 30px;text-align: right;width:170px;line-height: 30px;left: ' + left + '">' + _this.attr("placeholder") + '</span>');
            if (_this.val() != "") {
                _this.parent().find("span.placeholder").hide();
            }
            else {
                _this.parent().find("span.placeholder").show();
            }
        }).on("focus", function () {
            $(this).parent().find("span.placeholder").hide();
        }).on("blur", function () {
            var _this = $(this);
            if (_this.val() != "") {
                _this.parent().find("span.placeholder").hide();
            }
            else {
                _this.parent().find("span.placeholder").show();
            }
        });
        // 点击表示placeholder的标签相当于触发input
        $("span.placeholder").on("click", function () {
            // console.log("11")
            $(this).hide();
            $(this).siblings("[placeholder]").trigger("click");
            $(this).siblings("[placeholder]").trigger("focus");
        });
    }
//    提交
    $('body') .on('click', '.btn', function () {
        var name1 = /^[\u4e00-\u9fa5\u4dae\uE863\-a-zA-Z]{1,50}$/; //中英文1到50字内，不带数字
        var name2 = /^(\w)\1{1,}$/; //单个字母，重复字母
        var name3 = ['傻逼', '煞笔', '神经', '艳遇'];
        var name4 = /^[a-zA-Z-\s]+$/;//单个字母
        var mobilereg1 = /^1[3|5|6|7|8|9][0-9]{9}$/; // 1[356789][0-9] （后面再接8位数）
        var mobilereg2 = /^14[5|7][0-9]{8}$/; // 14[57] （后面再接8位数）
        var userName = $.trim($('#name').val());
        var mobile = $.trim($('#mobile').val());
        if (!userName) {
            alert('请填写姓名');
            return;
        } else if (!name1.test(userName)) {
            alert("您输入的姓名格式不正确，请重新输入");
            return;
        } else if (name2.test(userName.toLocaleLowerCase())) {// 大写字母转小写
            alert("您输入的姓名格式不正确，请重新输入");
            return;
        } else if (name3.indexOf(userName) > -1) {
            alert("您输入的姓名格式不正确，请重新输入");
            return;
        } else if (userName.length <= 1 && name4.test(userName)) {
            alert("您输入的姓名格式不正确，请重新输入");
            return;
        }
        if (!mobile) {
            alert('请填写手机号码');
            return;
        } else if (!mobilereg1.test(mobile) && !mobilereg2.test(mobile)) {
            alert('请填写正确的手机号码');
            return;
        }

    });
</script>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/132218.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年4月3，如有侵权请联系 cloudcommunity@tencent.com 删除

java