• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > jquery表单验证实例仿Toast提示效果

jquery表单验证实例仿Toast提示效果

作者:ithuangjiaqi 字体:[增加 减小] 来源:互联网 时间:2017-05-11

ithuangjiaqi通过本文主要向大家介绍了jquery表单验证实例仿Toast提示效果等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

HTML内容部分

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

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); 
    }
  });
</div>

以上所述是小编给大家介绍的jquery表单验证实例仿Toast提示效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2017-08-19javascript排序算法对比
  • 2017-05-11js手机号4位显示空格,银行卡每4位显示空格效果
  • 2017-05-11windows 下安装nodejs 环境变量设置
  • 2017-05-11使用vue实现点击按钮滑出面板的实现代码
  • 2017-05-11JavaScript实现反转字符串的方法详解
  • 2017-08-19前台js页面定时显示弹窗消息提示
  • 2017-05-11javascript获取以及设置光标位置
  • 2017-05-11微信小程序左右滑动切换页面详解及实例代码
  • 2017-09-15canvas-api beginPath()和closePath()
  • 2017-05-11javaScript+turn.js实现图书翻页效果实例代码

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • Vue.js组件tab实现选项卡切换
    • Bootstrap table右键功能实现方法
    • JavaScript中变量与作用域
    • Node.js的特点详解
    • BootStrap 弹出层代码
    • js数组与字符串常用方法总结
    • Vue 父子组件、组件间通信
    • 微信小程序 picker-view 组件详解及简单实例
    • js密码强度检验
    • JavaScript编写九九乘法表(两种任选)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有