首页 > Other > Skygq表单验证ajax无刷新表单提交合体版升级为1.5

Skygq表单验证ajax无刷新表单提交合体版升级为1.5

这段时间一直忙于公司的一些琐碎的小事,当然了,也开发了几个小的项目,所以一直处于比较忙碌的状态中,在做小项目的过程中,由于一些功能的需求比较特殊,刚好我的Skygq表单验证ajax无刷新表单提交合体版,可以用的上,但是还是有些特殊需求不能满足,于是对这个插件进行了一系列地升级,大家应该会注意到,这次版本一下子从Skygq表单验证ajax无刷新表单提交合体版升级为1.2就变成了1.5了~呵呵~不要惊讶呀~~1.3和1.4都没公布出来,用到项目中去了。下面来给大家说说这次版本的大改动,都增加了哪些功能吧。

  1. 对待input checkbox选择的特殊需求,现在可以做到限制它的选择个数,可以让它只选择几个,或者选择几个到几个之间。
  2. 对待input text文本域,可以设定输入的值必须在一个区间之内。比如限定输入的年龄在18岁到78岁。
  3. 新加了一个接口,可以添加验证规则
    接口实例如下:

    1 var rules = {
    2 "coupon_amount" : [/^0.([1-9]){1,2}$/,"必须为0.85这样的数字"]
    3 }
    4 $.skygqCheckAjaxForm.addRules(rules);

    规则是键值对的形式,“coupon_amount”代表的是验证类型,也就是对应着type参数,后面的数组参数的第一个参数是 验证规则,第二个参数是当表单的内容不符合这个验证规则的时候,提示的信息。
    这个对应着的表单初始化信息是这样的:

    1 { name:"zhekou",type:"coupon_amount",simple:"折扣",focusMsg:"请填写折扣系数"}
  4. 表单域的名称可以支持“[”、“]”、“.”这三种特殊符号

上面的前两点是好久之前有人在论坛里面就给我提过意见,让我能把插件加入这两个功能,那就太好了。今天终于搞定了~呵呵~教程我就不写了,只是对前面的Skygq表单验证ajax无刷新表单提交合体版升级为1.2插件的一个小小的升级。想看教程就去前面的链接吧。

话不多说!大家还是看在线DEMO演示吧

Skygq表单验证ajax无刷新表单提交合体版升级为1.5 在线DEMO演示

DEMO中的表单初始化用的js如下:

01 $(function(){
02 var rules = {
03 "coupon_amount" : [/^0.([1-9]){1,2}$/,"必须为0.85这样的数字"]
04 }
05 $.skygqCheckAjaxForm.addRules(rules);
06 //第二个表单验证
07 var items_array2 = [






08 { name:"info[login]",type:"username",simple:"用户名",message:"搞什么飞机,好好填写用户名",focusMsg:'数字和英文及下划线和.的组合,开头为字母,4-20个字符',ajax:{method:'post',url: base_url+'skygq_check_ajax_form_1_5/ajax.html',success_msg:'恭喜!用户名可用',failure_msg:'用户名已存在'}},
09 { name:"info",type:'password',simple:"密码",focusMsg:'最小长度:6 最大长度:16'},
10 { name:"info[confirm_password]",type:'eq',to:'info',simple:"确认密码",focusMsg:'请再输入一遍您上面填写的密码'},
11 { name:"info[email]",type:"mail",simple:"Email",focusMsg:'请填写真实并且最常用的邮箱'},
12 { name:"info[age]",simple:"年龄",between:[18,78],focusMsg:'年龄必须大于等于18小于等于78'},
13 { name:"info[do_years]",simple:"工作年限",type:"gt",value:3,focusMsg:'必须大于3'},
14 { name:"sport[]",simple:"运动",checked_limit:[2,2],focusMsg:"请选择2项运动"},
15 { name:"favourite[]",simple:"爱好",checked_limit:[4,7],focusMsg:"请选择4到7项爱好"},
16 { name:"sky.zhekou",type:"coupon_amount",simple:"折扣",focusMsg:"请填写折扣系数"}
17 ];
18
19 $("#form2").skygqCheckAjaxForm({
20 items : items_array2,
21 isAjaxSubmit : true,
22 success : showResponse2,
23 dataType : 'json'
24 });
25 function showResponse2(responseText, statusText, xhr, $form) {
26 alert("注册成功")
27 alert("JSON返回数据为:" + responseText);
28 }
29 });

再给个DEMO下载吧。(PS:下载的DEMO演示,和梦三秋的在线DEMO演示是不一样的,没有ajax提交也没有ajax验证,只是简单的一个前端验证。大家拿去研究研究吧,有完整的插件代码和一个mini压缩混淆的代码)

Skygq表单验证ajax无刷新表单提交合体版升级为1.5 下载

分类:Other
  1. 还没有评论。
  1. No trackbacks yet.

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: