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 传统事件模型构造的事件监听器实现代码
May 31 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 Javascript
Vue自定义全局弹窗组件操作
Aug 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
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
Content-type 的说明
2006/10/09 PHP
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
js 处理URL实用技巧
2010/11/23 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
初识Node.js
2014/09/03 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
Python素数检测的方法
2015/05/11 Python
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
Python多线程爬虫简单示例
2016/03/04 Python
Python heapq使用详解及实例代码
2017/01/25 Python
python实现年会抽奖程序
2019/01/22 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
如何填写个人简历自我评价
2013/12/10 职场文书
团队口号大全
2014/06/06 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
文明单位申报材料
2014/12/23 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
anaconda python3.8安装后降级
2021/06/11 Python
MySQL 数据表操作
2022/05/04 MySQL
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers