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 相关文章推荐
popdiv
Jul 14 Javascript
SWFObject Flash js调用类
Jul 08 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
Node.js下自定义错误类型详解
Oct 17 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
详解vue-cli之webpack3构建全面提速优化
Dec 25 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
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采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
Oracle快照(snapshot)
2015/03/13 面试题
人事专员工作职责
2014/02/22 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
新郎婚礼致辞
2015/07/27 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle