改造Form.JS ,方便layer弹窗按钮绑定Form表单;

分享 未结
0 187
飘在深秋
悬赏:80飞吻
项目开发中需要这一功能,论坛中搜索有很多答案,但是使用下来总觉得不太舒服,总感觉产品之间没有打通,个人感觉,勿喷!

于是改造了下form源码,符合自己的要求,所以分享一下!

如果有更好的解决方案,请大神指出!

改动处如下:

1.提取submit 验证规则到外部;

//验证函数
Form.verify = function(verifyElem,fieldElem){
var verify = form.config.verify, stop = null
,DANGER = 'layui-form-danger', field = {}
//开始校验
layui.each(verifyElem, function(_, item){
var othis = $(this)
,vers = othis.attr('lay-verify').split('|')
,verType = othis.attr('lay-verType') //提示方式
,value = othis.val();

othis.removeClass(DANGER);
layui.each(vers, function(_, thisVer){
var isTrue //是否命中校验
,errorText = '' //错误提示文本
,isFn = typeof verify[thisVer] === 'function';

//匹配验证规则
if(verify[thisVer]){
var isTrue = isFn ? errorText = verify[thisVer](value, item) : !verify[thisVer][0].test(value);
errorText = errorText || verify[thisVer][1];

//如果是必填项或者非空命中校验,则阻止提交,弹出提示
if(isTrue){
//提示层风格
if(verType === 'tips'){
layer.tips(errorText, function(){
if(typeof othis.attr('lay-ignore') !== 'string'){
if(item.tagName.toLowerCase() === 'select' || /^checkbox|radio$/.test(item.type)){
return othis.next();
}
}
return othis;
}(), {tips: 1});
} else if(verType === 'alert') {
layer.alert(errorText, {title: '提示', shadeClose: true});
} else {
layer.msg(errorText, {icon: 5, shift: 6});
}
if(!device.android && !device.ios) item.focus(); //非移动设备自动定位焦点
othis.addClass(DANGER);
return stop = true;
}
}
});
if(stop) return stop;
});

if(stop) return false;

var nameIndex = {}; //数组 name 索引
layui.each(fieldElem, function(_, item){
item.name = (item.name || '').replace(/^\s*|\s*&/, '');

if(!item.name) return;

//用于支持数组 name
if(/^.*\[\]$/.test(item.name)){
var key = item.name.match(/^(.*)\[\]$/g)[0];
nameIndex[key] = nameIndex[key] | 0;
item.name = item.name.replace(/^(.*)\[\]$/, '$1['+ (nameIndex[key]++) +']');
}

if(/^checkbox|radio$/.test(item.type) && !item.checked) return;
field[item.name] = item.value;
});
return field;
}
2.增加暴露函数
//表单获取
Form.prototype.ajax = function(layero){
var elem = $(layero)
,verifyElem = elem.find('*[lay-verify]') //获取需要校验的元素
,fieldElem = elem.find('input,select,textarea') //获取所有表单域
return Form.verify(verifyElem,fieldElem);
};
3.改写submit
//表单提交校验
var submit = function(){
var button = $(this), elem = button.parents(ELEM)
,verifyElem = elem.find('*[lay-verify]') //获取需要校验的元素
,formElem = button.parents('form')[0] //获取当前所在的form元素,如果存在的话
,fieldElem = elem.find('input,select,textarea') //获取所有表单域
,filter = button.attr('lay-filter'); //获取过滤器

//获取字段
return layui.event.call(this, MOD_NAME, 'submit('+ filter +')', {
elem: this
,form: formElem
,field: Form.verify(verifyElem,fieldElem)
});
};
4. layer按钮调用
	yes: function (index, layero) {
var data = form.ajax(layero);
.......................

搞定!
回帖
  • 消灭零回复