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. 新加了一个接口,可以添加验证规则
    接口实例如下:

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

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

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

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

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

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

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

$(function(){
	var rules = {
		"coupon_amount" 		: [/^0.([1-9]){1,2}$/,"必须为0.85这样的数字"]
	}
	$.skygqCheckAjaxForm.addRules(rules);
	//第二个表单验证
	var items_array2 = [
		{ 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:'用户名已存在'}},
		{ name:"info[password]",type:'password',simple:"密码",focusMsg:'最小长度:6 最大长度:16'},
		{ name:"info[confirm_password]",type:'eq',to:'info[password]',simple:"确认密码",focusMsg:'请再输入一遍您上面填写的密码'},
		{ name:"info[email]",type:"mail",simple:"Email",focusMsg:'请填写真实并且最常用的邮箱'},
		{ name:"info[age]",simple:"年龄",between:[18,78],focusMsg:'年龄必须大于等于18小于等于78'},
		{ name:"info[do_years]",simple:"工作年限",type:"gt",value:3,focusMsg:'必须大于3'},
		{ name:"sport[]",simple:"运动",checked_limit:[2,2],focusMsg:"请选择2项运动"},
		{ name:"favourite[]",simple:"爱好",checked_limit:[4,7],focusMsg:"请选择4到7项爱好"},
		{ name:"sky.zhekou",type:"coupon_amount",simple:"折扣",focusMsg:"请填写折扣系数"}
	];

	$("#form2").skygqCheckAjaxForm({
		items			: items_array2,
		isAjaxSubmit	: true,
		success			: showResponse2,
		dataType		: 'json'
	});
	function showResponse2(responseText, statusText, xhr, $form)  {
		alert("注册成功")
		alert("JSON返回数据为:" + responseText);
	}
});

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

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

原创文章,转载请注明: 转载自梦三秋

本文链接地址: Skygq表单验证ajax无刷新表单提交合体版升级为1.5

文章的脚注信息由WordPress的wp-posturl插件自动生成

关于梦三秋

有过辛酸有过泪,有过挫折有过失败,但是我从未放弃过,因为我叫甘强。所以我必须得强~
此条目发表在jQuery学习, jQuery插件分类目录,贴了, , , , , , , , 标签。将固定链接加入收藏夹。

Skygq表单验证ajax无刷新表单提交合体版升级为1.5》有 55 条评论

  1. 韩国说:

    博主还是那么专业。

  2. 混乱博客说:

    不错..挺不错的!

  3. Pingback引用通告: Skygq表单验证ajax表单提交合体版1.5 | jQueryER

  4. 不錯!!謝謝拉!

  5. 用用说:

    源码中这个在IE8和chrom下取不到$(“link[href$=skygq_valid.css]”,报undifend
    改为这样就可以了$(“link[href$=’skygq_valid.css’]”。
    博主看看是不是bug

  6. Floyd Fann说:

    Great blog, Just wanted to comment that i can not connect to the rss stream, you might want install the right wordpress plugin for that to workthat.

  7. chengJery说:

    请问,如果我想写个默认值该怎么写呢?比如:一个文本框中里面默认写着价格面议,当光标定位到文本框中,如果他写了一串汉子,字母或者数字等,当光标离开后,我们就去验证,如果他什么都没写,光标离开,我们什么都不去验证,文本框里还是默认写着价格面议这几个字。这样当验证请问在你写的这个验证里应该怎么写呢?

  8. Are you considering trading links?

  9. yun_yg说:

    太佩服博主了 厉害、向你学习、

  10. cwh说:

    我想问,就是说不用提交按钮怎么提交验证??

  11. cwh说:

    一般是你的这种提交方式 但有时也有特殊情况的嘛~~

  12. phpscott说:

    经验证 勃主很强. ie6下 右侧菜单怎么跑下面去了?

  13. 秋水长天说:

    有个问题啊,如果有值才作判断,没值就不判断,可以实现吗?

    • 梦三秋说:

      可以呀~~~~
      {name:’*****’,……,require:false}

      用require:false这个来达到你要的效果。

      • 秋水长天说:

        果然可以了,谢谢啊,百忙中还来回复
        这个插件很好用,不仅仅是漂亮的用户体验。
        有一点不知道插件是怎么处理的,就是不过我不用插件,在文本框失去焦点做判断,可是用户可以不理会错误信息继续提交,这样我就需要在提交前再次判断,重复劳动,插件是怎么让不符合规则的时候禁止提交的呢?

        • 梦三秋说:

          提交的时候,如果有错误,可以用return false;来阻止提交呀

          • 秋水长天说:

            我在失去焦点的时候做过判断,在提交的时候不想再判断一次,也就没有return false了啊。
            还有个问题,我能重写插件的ajax提交吗?插件验证失败只能阻止submit提交啊,或者修改插件,但这样插件就不通用了

          • 梦三秋说:

            在提交的时候,必须还要进行再判断的。如果提交的时候不进行判断的话,那别人直接不填写资料,直接提交你怎么办?

          • 秋水长天说:

            而且这个评论框的提交也是ajax,提交完成会有个提示信息,应该是重写了插件里的ajax提交的返回函数

  14. 秋水长天说:

    通过该页面的源码,已经知道怎么重写ajax提交返回函数了,问题都已解决,谢谢提供这么好的插件

  15. 平衡木说:

    扩展验证规则 ,能用自定义函数吗

  16. 求解决说:

    如果我主要 判断 是否 为空呢 正则表达式 在那里 怎么写呢

    • 梦三秋说:

      { name:”name”,simple:”simple”}
      这样最简单了,就可以判断是否为空了。

      正则表达式,我已经有接口了。但是关于正则表达式怎么个用法,这还得你自己去学习了。我这里不教正则表达式呢,呵呵~我自己也不是很在行正则表达式的。

  17. 熊老六说:

    非常感谢,研究中,前端菜鸟级别,不知道得研究到啥时候

  18. type:safe问题说:

    为什么我用type:safe检测,不可以,要有特殊字符才会通过,好像反了.

  19. bluewolf说:

    严重BUG,
    我用safe类型,结果是正常输入总是显示说不能有特殊字符而当我输入特殊字符却又说是对的,DBC类型也是

  20. Pingback引用通告: URL

  21. 啊德说:

    DEMO演示里提交的后台文件怎么没有的?应该怎么写啊??焦急等待!

  22. 说:

    在本机没有后台文件测试不了,能公布一个后台文件吗?或者能不能发个到我邮箱,谢谢博主

  23. don说:

    不是必填项,但是要验证格式怎么弄,菜鸟的我

发表评论

电子邮件地址不会被公开。 必填项已用*标注