利用jQuery跟HTML5实现无刷新Ajax风格的表单
日期：2014-05-17 浏览次数：20823 次
利用jQuery和HTML5实现无刷新Ajax风格的表单
接下来添加jQuery库，将如下代码添加到<link>标签之前：
户的输入内容是否是符合Email格式的发送按钮。代码如下：
利用jQuery我们能够做出一些相当震撼的网页效果。jQuery的出现使DOM的操作更加的简单易用。下面的教程展示了如何利用jQuery创建一个HTML5效果的邀请表格，同时实现表格内容的检查功能。最终效果图(demo下载)：
1.创建首页
首页的格式必须是HTML5的格式。代码如下：接下来添加jQuery库，将如下代码添加到<link>标签之前：
2.Email表格
下面我们需要向<body>添加内容。我们需要的仅仅是一个HTML5样式的email文本输入框和一个用来检验用户的输入内容是否是符合Email格式的发送按钮。代码如下：
把form标签包在div#completeform中是为了稍后展示动画。一旦发送成功，我们会将span#error和form#inviteform删除，同时添加一个一组成功发送的提示信息。在input标签中我们用到了一些HTML5的属性。第一个是将input的type设置成email，在chrome和其它的一些webkit系列的浏览器中能够检查用户的输入内容是否是Email地址；而autocorrect和autocapitalize则可以简化iphone和ipod的输入。
3.开始jQuery编码
利用正则表达式检测input的内容是否是email地址：
匹配input的内容是Email成功之后的函数：