利用jQuery和HTML5实现无刷新Ajax风格的表单

标签： 利用 jquery html5 | 发表时间：2012-06-16 12:22 | 作者：angun123
出处：http://blog.csdn.net

        利用jQuery我们能够做出一些相当震撼的网页效果。jQuery的出现使DOM的操作更加的简单易用。下面的教程展示了如何利用jQuery创建一个HTML5效果的邀请表格，同时实现表格内容的检查功能。最终效果图：


1.创建首页

        首页的格式必须是HTML5的格式。代码如下： 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>E-mail Invite Form Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

</body>
</html>
        接下来添加jQuery库，将如下代码添加到<link>标签之前： 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

2.Email表格

        下面我们需要向<body>添加内容。我们需要的仅仅是一个HTML5样式的email文本输入框和一个用来检验用
户的输入内容是否是符合Email格式的发送按钮。代码如下： 
<div id="completeform">
	<span id="error"></span>

	<form id="inviteform" name="inviteform" method="post" action="#">
		<input type="email" name="email" id="email" placeholder="E-mail address" autocomplete="off" autocorrect="off" autocapitalize="off">

		<div id="btnwrap"><button name="sendbtn" id="sendbtn" type="submit" value="Send">Send</button></div>
	</form>
</div>

        把form标签包在div#completeform中是为了稍后展示动画。一旦发送成功，我们会将span#error和form#inviteform删除，同时添加一个一组成功发送的提示信息。在input标签中我们用到了一些HTML5的属性。第一个是将input的type设置成email，在chrome和其它的一些webkit系列的浏览器中能够检查用户的输入内容是否是Email地址；而autocorrect和autocapitalize则可以简化iphone和ipod的输入。

3.开始jQuery编码

        利用正则表达式检测input的内容是否是email地址：

function isEmail(email) {
	// pass regex for validating an e-mail address
	var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
	return regex.test(email);
}
        匹配input的内容是Email成功之后的函数：

function completeInviteForm() {
	setTimeout(function() {
		$("#completeform").fadeOut(400, function(){
			$(this).before('<span class="msg">All set! We will be in 

touch.</span>');
		});
	}, 1100);
}

4.form的发送处理        

    var erdiv    = $("#error");
    var btnwrap  = $("#btnwrap");
    
    $(document).ready(function(){
            $("#sendbtn").live("click", function(e){
              // 点击发送按钮触发的事件
              e.preventDefault();// 禁用submit按钮的默认动作
              var emailval = $("#email").val();
                if(!isEmail(emailval)) {//错误的Emial
                        erdiv.html("enter a full e-mail address!");
                        erdiv.css("display", "block");
                }
                
                if(isEmail(emailval)) { // 正确的Email
                        erdiv.css("color", "#719dc8");
                        erdiv.html("just a sec...");
                        btnwrap.html('<img src="img/loader.gif" alt="loading">');
                        completeInviteForm();
                }
            });
    });
         总结：在表单的设计中Email的检测是非常重要的一个环节，通过上面的Ajax的无刷新的示例可以大提升用户的体验。

        原文地址

作者：angun123 发表于2012-6-16 12:22:03 原文链接
阅读：0 评论：0 查看评论

相关 [利用 jquery html5] 推荐：

利用jQuery和HTML5实现无刷新Ajax风格的表单

- - CSDN博客推荐文章
        利用jQuery我们能够做出一些相当震撼的网页效果. jQuery的出现使DOM的操作更加的简单易用. 下面的教程展示了如何利用jQuery创建一个HTML5效果的邀请表格，同时实现表格内容的检查功能.         首页的格式必须是HTML5的格式.         接下来添加jQuery库，将如下代码添加到标签之前：.

easy Html5 - Jquery Mobile之ToolBars(Header and Footer)

- - 博客园_首页
jquery 在web js框架上的风暴还在继续却也随着移动终端走向了mobile；那么jquery mobile到底包括些什么呢. 页面Header是一个data-role为header的div，当然我们可以在这个div里定义其他任何内容，比如常用的后退按钮等；. 一般在header里添加的button不要太多，添加在header里的按钮带有自动定位功能；.

jQuery Mobile开发HTML5移动应用

- - HTML5研究小组
随着移动互联世界的到来，目前已发展到多种移动 操作系统割据的局面，而开发者则急需要能运用原有的开发知识和技能，快速方便地构建移动应用程序，并期望能运行在不同的 手机操作平台上，比如Android,iOS,黑莓等. 而目前，出现了一批十分优秀的支持HTML5/CSS3的移动应用开发框架，其中最为大家熟悉的是jQuery Mobile框架(http:// jquerymobile.com)，它可以让熟悉jQuery框架的开发者快速开发出基于HTML5的移动应用，而且直接通过 手机的浏览器即可浏览.

【外刊IT评论网】HTML5 jQuery 绘图插件

- - 外刊IT评论网
Websanova Paint是一个利用HTML5画布(canvas)技术的jQuery插件. 它能够让你自由的在画板区域使用各种颜色画出任意的形状，还能够涂改. 它能让你设定所画形状的边框，然后用颜色填充. 它的一个最有趣的功能是能让你把画好的作品保存成图片，日后你还能载入这个图片进行二次修改，但有个限制，图片只支持PNG格式的.

HTML5+CSS3+jQuery制作视频播放器完全指南

- - 博客 - 伯乐在线
导读：毫无疑问HTML5已经是大势所趋，知名视频网站YouTube在两年前就开始推广HTML5播放器来代替Flash. 虽然国内还没有完全普及HTML5 浏览器，但在各大本土浏览器厂商的努力下，支持HTML5的浏览器在中国浏览器市场的占有率也在不断增长中. 本教程将会手把手地教你制作一个基于HTML5& CSS3& JavaScript 技术的视频播放器.

【转载】基于jQuery&CSS3的HTML5 portfolio特效制作

- - HTML5研究小组
在本教程中，我们将完成一个不错的基于jQuery和Quicksand插件的HTML5 portfolio特效. 它支持定制，因此，你完全可以扩展实现更多功能. 【e800编译】在本教程中，我们将完成一个不错的基于. jQuery和Quicksand插件的HTML5portfolio特效. 它支持定制，因此，你完全可以扩展实现更多功能.

zSlide-基于CSS3/HTML5演示文档jQuery插件

- - 张鑫旭-鑫空间-鑫生活
本文地址： http://www.zhangxinxu.com/wordpress/?p=2136. jquery.zSlide.js是我 zhangxinxu最近折腾的一个jQuery插件，借助于CSS3和HTML5的一些新特性，在浏览器中实现类似于powerpoint幻灯片展示. 无论是在公司内部，还是在一些技术会议上，我们做分享的时候，用的最多的想必是powerpoint.

jQuery html5Validate基于HTML5表单验证插件

- - 张鑫旭-鑫空间-鑫生活
本文地址： http://www.zhangxinxu.com/wordpress/?p=2857. 前3篇文章实际都是为本文做铺垫的，如果以下棋表示，前三篇是普通走棋，本篇是将军. 目前市面上有不少表单验证插件，看似强大，实在糟糕. 包括：改变了表单元素UI, 为表单元素绑定过多事件等. 包括：需要特定结构的布局，需要特定的类名或者ID.

利用 Jquery Deferred 异步你的程序

- - ITeye博客
最近在做公司QA系统改造时,有这样的一个场景.. JIRA平台(一个国外项目与事务跟踪工具)中获取,JIRA平台提供了很完善的Rest API.. 现在的要求是,在QA系统中提交项目时,必须先从JIRA平台获取很多的数据项,每次请求的Rest API都不一样,. 同时必须等所有请求都成功返回数据后才能提交项目..

jQuery中利用JSONP解决AJAX跨域问题

- - 蓝飞技术博客
跨域的解决方案有多种，其中最常见的是使用同一服务器下的代理来获取远端数据，再通过ajax进行读取，而在这期间经过了两次请求过程，使得获取数据的效率大大降低，这篇文章蓝飞就为大家介绍一下解决跨域问题的一种比较通用的方案——JSONP. 简单的来说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”.