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 相关文章推荐
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
javascript实现打砖块小游戏(附完整源码)
Sep 18 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 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
php中用文本文件做数据库的实现方法
2008/03/27 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
这段js代码得节约你多少时间
2011/12/20 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
python write无法写入文件的解决方法
2019/01/23 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
写给老师的表扬信
2014/01/21 职场文书
财务部总监岗位职责
2014/03/12 职场文书
会计核算科岗位职责
2014/03/19 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python