jquery验证表单，仿Toast提示效果

最新推荐文章于 2024-03-14 07:00:00 发布

ithuangjiaqi

最新推荐文章于 2024-03-14 07:00:00 发布

阅读量1.1k

点赞数

分类专栏： jQuery 文章标签： html jquery 表单

本文链接：https://blog.csdn.net/ItHuangJiaQi/article/details/59576188

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML内容部分

<div class="classname">
<label for="">请输入您的手机号码</label> <input type="text" id="MobilePhone"/>
<input type="text" /> -->
</div>

提示html及样式部分

<div id="errormsg" style="display: none;"></div>
                   <style>
                       #errormsg{
                           width: auto;
                           height: 20px;
                           padding: 1px 5px;
                           text-align: center;
                           background-color: #000;
                           opacity: 0.5;
                           color: #fff;
                           position: fixed;
                           left: 50%;
                           margin-left: -50px;
                           top: 93%;
                           border-radius: 20px;
                       }
                   </style>

jquery表单验证（正则表达式）

//验证手机号码
   $("#MobilePhone").blur(function(){
      var tel = $("#MobilePhone").val();//获取输入的手机号
　　　　var yidongreg = /^(134[012345678]\d{7}|1[34578][012356789]\d{8})$/;
　　　　var dianxinreg = /^1[3578][01379]\d{8}$/;
　　　　var liantongreg = /^1[34578][01256]\d{8}$/;
　　　　if (yidongreg.test(tel) || dianxinreg.test(tel) || liantongreg.test(tel))
　　　　{
              $("errormsg").css({"display":"block"});
                $("#errormsg").html("请输入正确号码").fadeIn(300).delay(2000).fadeOut(300);
　　　　}else{
           $("errormsg").css({"display":"block"});
               $("#errormsg").html("请输入正确号码").fadeIn(300).delay(2000).fadeOut(300);
       }
   });