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 相关文章推荐
js停止输出代码
Jul 20 Javascript
js 图片缩放(按比例)控制代码
May 27 Javascript
JavaScript 设计模式学习 Factory
Jul 29 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
Node调用Java的示例代码
Sep 20 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
js实现select下拉框选择
Jan 11 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新手上路(十四)
2006/10/09 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
JS的反射问题
2010/04/07 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
python 正确保留多位小数的实例
2018/07/16 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
python实现字符串加密成纯数字
2019/03/19 Python
Python requests模块session代码实例
2020/04/14 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
百度软件工程师职位
2013/02/14 面试题
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
电脑教师的自我评价
2013/12/18 职场文书
初中数学教学反思
2014/01/16 职场文书
合伙经营协议书范本
2014/04/18 职场文书
大班幼儿评语大全
2014/04/30 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
运动会广播稿50字
2015/08/19 职场文书
小学生运动会广播
2015/08/19 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
导游词之天津古文化街
2019/11/09 职场文书
Mysql中常用的join连接方式
2022/05/11 MySQL