jquery验证邮箱格式并显示提交按钮


Posted in Javascript onNovember 07, 2015

简要教程
简洁、大方和直观的用户界面是我们最喜欢的网页设计。本文介绍的正是这样的一个设计风格。

jquery验证邮箱格式并显示提交按钮

jquery验证邮箱格式并显示提交按钮

如何才能做到页面的简洁大方并且人性化?大多数网站的表单采用文本提示的方法,提示用户哪里填写错了,哪里不正确,但我们应该能做得更好:填写不正确就不显示提交按钮!
HTML结构

<form class="newsletter">
 <input type="email" value="" placeholder="Enter your email address" />
 <input type="submit" value="OK" />
</form>

JAVASCRIPT:
检查输入的文本是否为一个正确的email地址,如果正确,就给表单添加特定的样式,否则不添加,通过css来控制这个样式是否显示按钮。
依赖于jQuery的做法:

$( function( $, window, document, undefined )
{
 'use strict';
 
 var form  = '.newsletter',
  className = 'newsletter--active',
  email  = 'input[type="email"]';
 
 $( form ).each( function()
 {
  var $form = $( this ),
   $email = $form.find( email ),
   val  = '';
 
  $email.on( 'keyup.addClassWhenEmail', function()
  {
   val = $email.val();
   $form.toggleClass( className, val != '' && /^([\w-\.]+@([\w-]+\.)+[\w-]{2,12})?$/.test( val ) );
  });
 });
})( jQuery, window, document );

以上代码兼容IE6以上的浏览器
如果你想关闭这项功能,可以通过关闭名称空间addClassWhenEmail来实现。

$( '.newsletter input[type="email"]' ).off( '.addClassWhenEmail' );

不使用jQuery,纯javascript的做法:

;( function( window, document, undefined )
{
 'use strict';
 
 var form  = '.newsletter',
  className = 'newsletter--active',
  email  = 'input[type="email"]',
 
  addEventListener = function( element, event, handler )
  {
   element.addEventListener ? element.addEventListener( event, handler ) : element.attachEvent( 'on' + event, function(){ handler.call( element ); });
  },
  forEach = function( elements, fn )
  {
   for( var i = 0; i < elements.length; i++ ) fn( elements[ i ], i );
  },
  addClass = function( element, className )
  {
   element.classList ? element.classList.add( className ) : element.className += ' ' + className;
  },
  removeClass = function( element, className )
  {
   element.classList ? element.classList.remove( className ) : element.className += element.className.replace( new RegExp( '(^|\\b)' + className.split( ' ' ).join( '|' ) + '(\\b|$)', 'gi' ), ' ' );
  };
 
 forEach( document.querySelectorAll( form ), function( $form )
 {
  var $email = $form.querySelectorAll( email );
 
  if( $email.length )
  {
   $email = $email[ 0 ];
   addEventListener( $email, 'keyup', function()
   {
    $email.value != '' && /^([\w-\.]+@([\w-]+\.)+[\w-]{2,12})?$/.test( $email.value ) ? addClass( $form, className ) : removeClass( $form, className );
   });
  }
 });
})( window, document );

以上代码兼容IE8+以及所有现代浏览器。
可用参数
这里有三个参数可以用来改变选择器:

var form  = '.newsletter',   // form selector
className = 'newsletter--active',  // class name for form when correct email is entered
email  = 'input[type="email"]', // email input field selector

 CSS代码
js代码用来切换样式,真正显示于隐藏则通过css来实现:

.newsletter:not( .newsletter--active ) input[type='submit']
{
 display: none;
}

以上就是为大家分享的jquery验证邮箱格式并显示提交按钮的方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
详解JavaScript树结构
Jan 09 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
jquery判断当前浏览器的实现代码
Nov 07 #Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 #Javascript
js识别uc浏览器的代码
Nov 06 #Javascript
详解javascript数组去重问题
Nov 06 #Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 #Javascript
实现非常简单的js双向数据绑定
Nov 06 #Javascript
浅析javascript中的事件代理
Nov 06 #Javascript
You might like
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
PHP 读取和编写 XML
2014/11/19 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
python协程用法实例分析
2015/06/04 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
详解Python核心对象类型字符串
2018/02/11 Python
python如何将多个PDF进行合并
2019/08/13 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
Python操作Jira库常用方法解析
2020/04/10 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
房地产财务管理制度
2014/02/02 职场文书
医院保洁服务方案
2014/06/11 职场文书
社区端午节活动总结
2015/02/11 职场文书
律师催款函范文
2015/06/24 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python