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


Posted in Javascript onMarch 03, 2017

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

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

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

Javascript 相关文章推荐
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
vue组件三大核心概念图文详解
May 30 Javascript
vue实现将一个数组内的相同数据进行合并
Nov 07 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 Javascript
基于JavaScript实现轮播图效果
Jan 02 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 #Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
Mar 03 #Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 #Javascript
JavaScript数组迭代方法
Mar 03 #Javascript
vue.js的提示组件
Mar 02 #Javascript
js实现功能比较全面的全选和多选
Mar 02 #Javascript
jQuery实现三级联动效果
Mar 02 #Javascript
You might like
PHPShop存在多个安全漏洞
2006/10/09 PHP
php 获取mysql数据库信息代码
2009/03/12 PHP
php使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
Python logging模块用法示例
2018/08/28 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
Python中Unittest框架的具体使用
2019/08/27 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
python实现拼接图片
2020/03/23 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
python递归函数用法详解
2020/10/26 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
大学军训感言800字
2014/02/27 职场文书
企业承诺书格式
2014/05/21 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
Windows7下FTP搭建图文教程
2022/08/05 Servers