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 基础问答三
Dec 03 Javascript
JavaScript delete操作符应用实例
Jan 13 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
深入Vue-Router路由嵌套理解
Aug 13 Javascript
layui弹出框Tab选项卡的示例代码
Sep 04 Javascript
浅谈JavaScript作用域
Dec 06 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语法(4)
2006/10/09 PHP
PHP字符串 ==比较运算符的副作用
2009/10/21 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
原生js实现日历效果
2020/03/02 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
python操作MongoDB基础知识
2013/11/01 Python
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
Python微信库:itchat的用法详解
2017/08/14 Python
Python中import机制详解
2017/11/14 Python
python机器学习之随机森林(七)
2018/03/26 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
python中的句柄操作的方法示例
2019/06/20 Python
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
NULL是什么,它是怎么定义的
2015/05/09 面试题
测试驱动开发的主要步骤是什么
2014/12/10 面试题
服装电子商务创业计划书
2014/01/30 职场文书
电工工作职责范本
2014/02/22 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python