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>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/132218.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Android ConstraintLayout布局详解[通俗易懂]

    Android ConstraintLayout布局详解[通俗易懂]前言之前在使用AndroidStudio新建项目的时候,发现MainActivity的默认布局从RelativeLayout变成了ConstraintLayout。当时就对这个ConstraintLayout很好奇,就研究了一下。发觉确实很强大,在此做个总结。ConstraintLayout定义什么是ConstraintLayout呢?ConstraintLayout是Google在2016年的

  • hdu 4885 TIANKENG’s travel(bfs)

    hdu 4885 TIANKENG’s travel(bfs)

  • ajaxSubmit上传文件返回结果是下载action文件

    ajaxSubmit上传文件返回结果是下载action文件在ajaxSubmit提交表单的配置里面,增加一个参数,服务器端判断是否是ajaxSubmit提交过来的表单,是的话就返回“text/html”类型的内容,不是就可以返回“application/json”的。publicvoidwrite(Stringmsg,HttpServletResponseresponse)throwsException{PrintWri

  • es与数据库的同步方案

    es与数据库的同步方案一、双写模式我们采取MySQL作为主要的数据存储,利用MySQL的事务特性维护数据一致性,使用ElasticSearch进行数据汇集和查询,此时es与数据库的同步方案就尤为重要。保证es与数据库的同步方案:1、首先添加商品入数据库,添加商品成功后,商品入ES,若入ES失败,将失败的商品ID放入redis的缓存队列(或MQ),且失败的商品ID入log文件(若出现redis挂掉,可从日志中取异…

  • 帮谷歌推广Webp图片格式之:Webp的格式转换

    帮谷歌推广Webp图片格式之:Webp的格式转换

  • python编程是什么-Python编程

    python编程是什么-Python编程随着人工智能时代的来临,编程语言的热度居高不下,随着智能机器人的出现,在2020年更是迎来一波新的高峰。在这样的大环境下,关于谁是人工智能最流行编程语言的讨论也十分热烈,C、C++、Java、Python等编程语言不断被拿出来做比较。那么接下来,风变编程来解析一波当下编程语言的新趋势。Python受欢迎度有望超越Java?近日,TIOBE编程语言社区公布了2020年10月编程语言排行榜。榜单数据显…

发表回复

您的电子邮箱地址不会被公开。

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