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

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

表单类='简讯'输入类型='电子邮件'值='占位符='输入您的电子邮件地址'/输入类型='提交'值='确定'/表单JAVASCRIPT:检查输入的文本是否为一个正确的电子邮件地址，如果正确，就给表单添加特定的样式，否则不添加，通过钢性铸铁来控制这个样式是否显示按钮。依赖于jQuery的做法：

$(函数($,窗口，文档，未定义){ '使用“严格”；var form=' .简讯','简讯-活动，电子邮件='输入[type=' email ']'；$(表单)。每个(function() { var $form=$(this)，$email=$form.find(email)，val=$ email。on('向上键。addclasswhenemail '，function(){ val=$ email。val()；$form.toggleClass(className，val！='' /^([w-.][emailprotected]([w-] .)[w-]{2，12})？$/.测试(val))；});});})(jQuery，窗口，文档);以上代码兼容IE6以上的浏览器如果你想关闭这项功能，可以通过关闭名称空间添加类别发送电子邮件来实现。

$('.简讯输入[类型='电子邮件']')。关闭('。addClassWhenEmail’)；不使用jQuery，纯爪哇岛描述语言的做法：

；（函数（窗口、文档、未定义){ '使用“严格”；var form=' .newsletter '，' newsletter - active '，email='input[type='email']'，addEventListener=function(element，event，handler){ element。addEventListener？element.addEventListener(事件，处理程序):元素。attachevent(' on ' event，function(){ handler.call(元素);});}，forEach=function(elements，fn){ for(var I=0；一。要素。长度；（一)fn(元素[我]，我)；}，addClass=function(element，className ) { element.classList？元素。班级名单。添加(类名):元素。类名='类名；}，removeClass=function(element，className ) { element.classList？元素。班级名单。移除(类名):元素。类名=元素。类名。替换(新regexp('(^|\b)'类名。拆分(').join('|' ) '(\b|$)'，' gi ')，' ')；};forEach(文档。queryselectorall(form)，function($ form){ var $ email=$ form。queryselectorall(电子邮件)；if($电子邮件。长度){ $ email=$ email[0]；addEventListener($email，' keyup '，function() { $email.value！='' /^([w-.][emailprotected]([w-] .)[w-]{2，12})？$/.测试($email.value)？addClass($form，类名): remove class($ form，类名)；});} });})(窗口、文档);以上代码兼容IE8以及所有现代浏览器。可用参数这里有三个参数可以用来改变选择器：

var form=' .新闻稿',//表单选择类名称='新闻稿-活动',//输入正确电子邮件时表单类名称电子邮件='输入[类型='电子邮件']',//电子邮件输入字段选择器半铸钢钢性铸铁(Cast Semi-Steel)代码射流研究…代码用来切换样式，真正显示于隐藏则通过钢性铸铁来实现：newsletter:not(.新闻稿-活动)输入[类型=' submit ']{ display : none；} 以上就是为大家分享的jquery验证邮箱格式并显示提交按钮的方法，希望对大家的学习有所帮助。