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 BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
JavaScript DOM 学习第三章 内容表格
Feb 19 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
Vue 子组件与数据传递问题及注意事项
Jul 11 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
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
php unlink()函数使用教程
2018/07/12 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
JavaScript中常见陷阱小结
2010/04/27 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
2014/08/07 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
Python 爬虫的工具列表大全
2016/01/31 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
深入了解NumPy 高级索引
2020/07/24 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
30年同学聚会邀请函
2014/01/25 职场文书
应届生自荐信范文
2014/02/21 职场文书
房地产推广策划方案
2014/05/19 职场文书
2014年安全生产责任书
2014/07/22 职场文书
焦裕禄纪念馆观后感
2015/06/09 职场文书
西安事变观后感
2015/06/12 职场文书
高二英语教学反思
2016/03/03 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
基于Python实现流星雨效果的绘制
2022/03/18 Python
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏