jquery手机号码正则验证

jquery手机号码正则验证<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scripttype="text/javascript"src=&qu

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

<!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.net/132218.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • Python装饰器高级用法

    Python装饰器高级用法

    2020年11月20日
  • USART和UART的区别 UART和RS232/RS485的关系是什么?

    USART和UART的区别 UART和RS232/RS485的关系是什么?订阅专栏UART:universalasynchronousreceiverandtransmitter通用异步收发器[BusSignal]TX,RXUSART:universalsynchronousasynchronousreceiverandtransmitter通用同步异步收发器[BusSignal]TX,RX,CKUSART支持同步模式,因此USART需要同步始终信号USART_CK(如STM32单片机),

    2022年5月19日
  • 微软新的版本发布模式将把 Win 10 玩出碎片化?

    微软新的版本发布模式将把 Win 10 玩出碎片化?

    2021年6月20日
  • Pycharm Debug调试使用+代码调试理解

    Pycharm Debug调试使用+代码调试理解Pycharm使用教程03pycharm的Debug调试使用+代码调试理解。横着的七个按钮的功能:依次从左到右。ShowExecutionPoint:鼠标光标跳到程序运行到的位置StepOver:单步运行程序,不进入函数。在单步执行时,在函数内遇到子函数时不会进入子函数内单步执行,而是将子函数整个执行完再停止,也就是把子函数整个作为一步。在不存在子函数的情况下是和stepinto效果一样的。简单的说就是,程序代码越过子函数,但子函数会执行,且不进入。StepInto:在单步执行时,遇到子函数

    2022年10月31日
  • Linux 安装nodejs_pe安装linux

    Linux 安装nodejs_pe安装linuxlinux安装Node.js(详细)Node.js安装教程文章目录linux安装Node.js(详细)Node.js安装教程1:下载2:解压3:移动目录1:创建目录2:移动目录并重命名4:设置环境变量5:刷新修改6:安装完成,查看版本号1:下载wgethttps://nodejs.org/dist/v14.17.4/node-v14.17.4-linux-x64.tar.xz更多版本选择:===》更多nodejs版本下载2:解压tarxfnode-v14.17.4-linux-x64.

    2022年9月12日
  • emwin教程_emwin教程

    emwin教程_emwin教程1.位图显示(1)BmpCvt[位图转换器]作用将位图从PC格式转换为C文件,emwin可使用的位图在C文件中定义为GUI_BITMAP结构体。注:如果图片要转化为bmp格式,可以用画图软件,像素大小要合适设置如下:…

    2022年10月14日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号