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 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
jqgrid 表格数据导出实例
Nov 21 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 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
PHP面向对象编程快速入门
2006/12/14 PHP
php读取30天之内的根据算法排序的代码
2008/04/06 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
phpmailer在服务器上不能正常发送邮件的解决办法
2014/07/08 PHP
PHP数组实例详解
2016/06/26 PHP
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
Jquery中获取iframe的代码
2011/01/11 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
python操作ie登陆土豆网的方法
2015/05/09 Python
一些常用的Python爬虫技巧汇总
2016/09/28 Python
python rsa 加密解密
2017/03/20 Python
Python魔法方法功能与用法简介
2019/04/04 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
Pytorch之contiguous的用法
2019/12/31 Python
python实现滑雪者小游戏
2020/02/22 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
Python中Qslider控件实操详解
2021/02/20 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
写演讲稿要注意的六件事
2014/01/14 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
工作收入证明模板
2014/10/10 职场文书
评先进个人材料
2014/12/29 职场文书
值班管理制度范本
2015/08/06 职场文书