日期:2014-05-16  浏览次数:20623 次

Skygq表单验证ajax无刷新表单提交详解(jquery)

最近一直都在忙着将梦三秋在线测试工具做成开放的代码分享平台,在后台的搭建过程中,我用到了自己做的几款插件,在使用的过程中,发现Skygq表单验证和表单ajax提交合体版1.1中存在很多的缺陷,于是在写后台代码的过程中,我将这款插件进行了更新,更新之后的合体版插件将更加的简单易用,并且效果也非常不错。下面大家听我来说说这个新版本都修改了哪些东西,以及新的特性吧。

?

skygqCheckAjaxForm.1.2.rar 下载

此图片是截取即将开放的梦三秋在线测试工具的后台的用到Skygq表单验证ajax提交合体版1.2插件的个人中心页面。



?

skygq表单验证和表单ajax提交合体版1.2效果展示

?

接下来我来总体说一下这款合体插件的一些特点吧:

  1. 将表单验证和ajax表单提交功能和在一起,这是非常方便的,而且功能很强大
  2. 虽然集成了这么强大的功能,但是代码压缩之后还是非常小的,只有7KB,性能非常优秀
  3. 很有趣的遮罩层,只会覆盖表单域的范围哦!
  4. 可以手动的选择是否进行ajax无刷新表单提交,当你选择不进行无刷新表单提交的时候,这款插件就相当于一个表单验证插件。
  5. 如果您是CSS高手,您也可以对Focus提示的样式进行修改。
  6. 插件配置插件相对于之前的一个版本要简单多了,调用更加的简单
  7. 同一个页面有多个form也不会相互干扰
  8. 继续沿用了Skygq Jquery 表单验证插件的验证规则
  9. Focus提示的样式文件和ajax loading的图片都不用再手动添加,插件会自动添加,插件尽量做到智能化
  10. 此版本较上个版本,有个很大的改进就是进行ajax无刷新提交的成功之后,loading的图片以及遮罩层物件不需要手动去处理,在插件中都集成了处理。让您可以专注于对返回结果的处理。
  11. 在进行ajax无刷新提交的时候,整个页面会出现一个半透明的遮罩层已经一个始终居中的ajax-loading的图片,可以让用户感觉到页面是在进行ajax提交的。当然,您也可以选择不出现遮罩层,但是同时ajax loading的图片也不会出现了。

恩~大致就这么多特点了,呵呵~~咱也不多吹嘘了,大家自己试试效果就知道了。



?

在线DEMO看过了,大家是不是觉得挺不错的呢~~呵呵~~觉得不错的就接着看下去吧~下面来说这个插件的新用法吧:

  • 使用插件前的准备工作
    在使用Skygq表单验证和ajax无刷新表单提交合体版1.2插件之前,您必须在您的网页head里面加入如下代码:
    最新的Jquery1.4.4版本,本插件是适合运行在jquery1.3.2及以上版本,如果您的网页已经有了jquery 文件,那么不必加入下面的代码

    ?

    1 < script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type = "text/javascript" ></ script >

    Skygq表单验证和表单ajax提交合体版插件js文件,

    1 < script ?src = "skygqCheckAjaxForm.1.2/jquery.skygqCheckAjaxform.1.2.js" type = "text/JavaScript" ></ script >

    恩,现在只要加载这两个文件就可以使用新版的插件了,CSS样式已经不用手动添加了。呵呵~很重要的进步哦~~