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 IE 与 FF中兼容问题小结
Feb 18 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
JS使用正则表达式验证身份证号码
Jun 23 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
详解Vue、element-ui、axios实现省市区三级联动
May 07 Javascript
Vue中错误图片的处理的实现代码
Nov 07 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 jsonp单引号转义
2014/11/23 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
python读取指定字节长度的文本方法
2019/08/27 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
庆祝教师节活动方案
2014/01/31 职场文书
xxx同志考察材料
2014/02/07 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
期末学生评语大全
2014/04/24 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
优秀班主任材料
2014/12/16 职场文书
付款承诺函范文
2015/01/21 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP