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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
jQuery 注意事项 与原因分析
Apr 24 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
element-ui表格数据转换的示例代码
Aug 24 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
js实现AI五子棋人机大战
May 28 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
乐信RP2100的电路分析和打磨
2021/03/02 无线电
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
php并发加锁示例
2016/10/17 PHP
PDO::errorInfo讲解
2019/01/28 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
Python实现快速多线程ping的方法
2015/07/15 Python
python如何获取服务器硬件信息
2017/05/11 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
个人求职信范文分享
2013/12/13 职场文书
记者岗位职责
2014/01/06 职场文书
环保建议书作文
2014/03/12 职场文书
六年级学生评语
2014/04/22 职场文书
消防工作实施方案
2014/06/09 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
综合测评个人总结
2015/03/03 职场文书
党员转正介绍人意见
2015/06/03 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书