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 中对象的继承〔转贴〕
Jan 22 Javascript
jquery 获取json数据实现代码
Apr 27 Javascript
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
js有序数组的连接问题
Oct 01 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
Js的Array数组对象详解
Feb 22 Javascript
vue.js todolist实现代码
Oct 29 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 图片水印类代码
2012/08/27 PHP
基于PHP静态类的原罪详解
2013/05/06 PHP
php格式化金额函数分享
2015/02/02 PHP
php实现字符串翻转的方法
2015/03/27 PHP
Smarty变量用法详解
2016/05/11 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
JavaScript中的Window窗口对象
2008/01/16 Javascript
js里的prototype使用示例
2010/11/19 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
详解Python中打乱列表顺序random.shuffle()的使用方法
2019/11/11 Python
柏林通行证:Berlin Pass
2018/04/11 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
机械工程师求职自我评价
2013/09/23 职场文书
公司董事长职责
2013/12/12 职场文书
员工年终演讲稿
2014/01/03 职场文书
高中生操行评语大全
2014/04/25 职场文书
班主任与学生安全责任书
2014/07/25 职场文书
个人融资协议书
2014/10/02 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
失恋33天观后感
2015/06/11 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
5行Python代码实现一键批量扣图
2021/06/29 Python