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 (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
Sep 19 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
谈谈JavaScript中super(props)的重要性
Feb 12 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 Session机制简介及用法
2014/08/19 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
Ext grid 添加右击菜单
2009/11/26 Javascript
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
shell的种类有哪些
2015/04/15 面试题
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
怎么写有吸引力的自荐信
2013/11/17 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
三好学生竞选稿
2015/11/21 职场文书
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS