【elementui表单验证】Skygq表单验证ajax无刷新表单提交

更新时间:2018-07-20    来源:文本特效    手机版     字体:

【www.bbyears.com--文本特效】

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.表单域的名称可以支持“[”、“]”、“.”这三种特殊符号

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验证,只是简单的一个前端验证

http://file.111cn.net/upload/2013/09/ajax.rar

本文来源:http://www.bbyears.com/wangyetexiao/43002.html

热门标签

更多>>

本类排行