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 相关文章推荐
jQuery 图像裁剪插件Jcrop的简单使用
May 22 Javascript
Google Map Api和GOOGLE Search Api整合实现代码
Jul 18 Javascript
jquery 插件开发备注
Aug 27 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
微信小程序实现tab切换效果
Nov 21 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
关于React动态加载路由处理的相关问题
Jan 07 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
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
php foreach循环中使用引用的问题
2013/11/06 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
新闻内页-JS分页
2006/06/07 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
js实现常用排序算法
2016/08/09 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
js array数组对象操作方法汇总
2019/03/18 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
基于Python实现的ID3决策树功能示例
2018/01/02 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
python http基本验证方法
2018/12/26 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
python实现日志按天分割
2019/07/22 Python
python中@property和property函数常见使用方法示例
2019/10/21 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
员工培训心得体会
2013/12/30 职场文书
五一家具促销方案
2014/01/10 职场文书
公证书样本
2014/04/10 职场文书
2014最新实习证明模板
2014/10/02 职场文书
Oracle中日期的使用方法实例
2022/07/07 Oracle