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技术很烂的五个原因
Apr 26 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 Javascript
js实现密码强度检验
Jan 15 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
JS查找数组中重复元素的方法详解
Jun 14 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
详解Vue This$Store总结
Dec 17 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
JSX在render函数中的应用详解
Sep 04 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字符串函数学习之substr()
2015/03/27 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
python如何让类支持比较运算
2018/03/20 Python
Python @property使用方法解析
2019/09/17 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
思想政治自我鉴定
2013/10/06 职场文书
求职者应聘的自我评价
2013/10/16 职场文书
大学毕业感言一句话
2014/02/06 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
捐书活动倡议书
2015/04/27 职场文书
任命书格式范文
2015/09/22 职场文书
Selenium浏览器自动化如何上传文件
2022/04/06 Python
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技