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

2012-06-20

利用jQuery和HTML5实现无刷新Ajax风格的表单利用jQuery我们能够做出一些相当震撼的网页效果。jQuery的出现

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

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

1.创建首页首页的格式必须是HTML5的格式。代码如下：

    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的无刷新的示例可以大提升用户的体验。

原文地址

热点排行

CSS

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