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 相关文章推荐
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 Javascript
Jquery-data的三种用法
Apr 18 jQuery
D3.js实现拓扑图的示例代码
Jun 30 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
JS一次前端面试经历记录
Mar 19 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
IStream与TStream之间的相互转换
2008/08/01 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
php模拟登陆的实现方法分析
2015/01/09 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
php扩展开发入门demo示例
2019/09/23 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
解放web程序员的输入验证
2006/10/06 Javascript
javascript编程起步(第二课)
2007/01/10 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
javascript简单写的判断电话号码实例
2017/05/24 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
Python设置默认编码为utf8的方法
2016/07/01 Python
关于Django外键赋值问题详解
2017/08/13 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
利用python 读写csv文件
2020/09/10 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
网络营销实训总结
2015/08/03 职场文书
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL