1
0
mirror of https://gitee.com/layui/layui.git synced 2025-04-24 18:04:56 +08:00
layui/src/modules/form.js

788 lines
27 KiB
JavaScript
Raw Normal View History

2022-05-18 22:35:13 +08:00
/**
2021-05-08 06:31:19 +08:00
* form 表单组件
* MIT Licensed
2017-08-21 08:51:13 +08:00
*/
layui.define('layer', function(exports){
"use strict";
var $ = layui.$
,layer = layui.layer
,hint = layui.hint()
,device = layui.device()
2018-05-08 15:51:37 +08:00
,MOD_NAME = 'form', ELEM = '.layui-form', THIS = 'layui-this'
,SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled'
2017-08-21 08:51:13 +08:00
,Form = function(){
this.config = {
verify: {
required: [
/[\S]+/
,'必填项不能为空'
]
,phone: [
/^1\d{10}$/
,'请输入正确的手机号'
]
,email: [
/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
,'邮箱格式不正确'
]
,url: [
2021-05-08 06:31:19 +08:00
/^(#|(http(s?)):\/\/|\/\/)[^\s]+\.[^\s]+$/
2017-08-21 08:51:13 +08:00
,'链接格式不正确'
]
2017-09-13 16:06:55 +08:00
,number: function(value){
if(!value || isNaN(value)) return '只能填写数字'
}
2017-08-21 08:51:13 +08:00
,date: [
/^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/
,'日期格式不正确'
]
,identity: [
/(^\d{15}$)|(^\d{17}(x|X|\d)$)/
,'请输入正确的身份证号'
]
}
2021-05-31 08:57:00 +08:00
,autocomplete: null //全局 autocomplete 状态。null 表示不干预
2017-08-21 08:51:13 +08:00
};
};
//全局设置
Form.prototype.set = function(options){
var that = this;
$.extend(true, that.config, options);
return that;
};
//验证规则设定
Form.prototype.verify = function(settings){
var that = this;
$.extend(true, that.config.verify, settings);
return that;
};
2021-03-31 14:07:23 +08:00
//表单事件
2017-08-21 08:51:13 +08:00
Form.prototype.on = function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback);
};
2018-05-08 15:51:37 +08:00
2019-09-10 08:37:47 +08:00
//赋值/取值
2018-05-05 16:59:53 +08:00
Form.prototype.val = function(filter, object){
var that = this
,formElem = $(ELEM + '[lay-filter="' + filter +'"]');
2019-09-10 08:37:47 +08:00
//遍历
2018-05-05 16:59:53 +08:00
formElem.each(function(index, item){
2019-09-10 08:37:47 +08:00
var itemForm = $(this);
//赋值
2018-05-05 16:59:53 +08:00
layui.each(object, function(key, value){
2019-09-10 08:37:47 +08:00
var itemElem = itemForm.find('[name="'+ key +'"]')
2018-05-08 15:51:37 +08:00
,type;
//如果对应的表单不存在,则不执行
2018-05-05 16:59:53 +08:00
if(!itemElem[0]) return;
2018-05-08 15:51:37 +08:00
type = itemElem[0].type;
//如果为复选框
if(type === 'checkbox'){
2018-05-05 16:59:53 +08:00
itemElem[0].checked = value;
2018-05-08 15:51:37 +08:00
} else if(type === 'radio') { //如果为单选框
itemElem.each(function(){
2019-05-31 14:36:29 +08:00
if(this.value == value ){
2018-05-08 15:51:37 +08:00
this.checked = true
}
});
} else { //其它类型的表单
itemElem.val(value);
}
2018-05-05 16:59:53 +08:00
});
});
2019-09-10 08:37:47 +08:00
2018-05-05 16:59:53 +08:00
form.render(null, filter);
2019-09-10 08:37:47 +08:00
//返回值
return that.getValue(filter);
};
//取值
Form.prototype.getValue = function(filter, itemForm){
itemForm = itemForm || $(ELEM + '[lay-filter="' + filter +'"]').eq(0);
var nameIndex = {} //数组 name 索引
,field = {}
,fieldElem = itemForm.find('input,select,textarea') //获取所有表单域
2021-04-22 10:22:45 +08:00
layui.each(fieldElem, function(_, item){
var othis = $(this)
,init_name; //初始 name
2019-09-10 08:37:47 +08:00
2021-04-22 10:22:45 +08:00
item.name = (item.name || '').replace(/^\s*|\s*&/, '');
2019-09-10 08:37:47 +08:00
if(!item.name) return;
//用于支持数组 name
if(/^.*\[\]$/.test(item.name)){
var key = item.name.match(/^(.*)\[\]$/g)[0];
nameIndex[key] = nameIndex[key] | 0;
2021-04-22 10:22:45 +08:00
init_name = item.name.replace(/^(.*)\[\]$/, '$1['+ (nameIndex[key]++) +']');
2019-09-10 08:37:47 +08:00
}
2021-04-22 10:22:45 +08:00
if(/^checkbox|radio$/.test(item.type) && !item.checked) return; //复选框和单选框未选中,不记录字段
field[init_name || item.name] = item.value;
2019-09-10 08:37:47 +08:00
});
return field;
2018-05-05 16:59:53 +08:00
};
2017-08-21 08:51:13 +08:00
//表单控件渲染
Form.prototype.render = function(type, filter){
var that = this
2021-05-31 08:57:00 +08:00
,options = that.config
2017-08-21 08:51:13 +08:00
,elemForm = $(ELEM + function(){
return filter ? ('[lay-filter="' + filter +'"]') : '';
}())
,items = {
2021-05-31 08:57:00 +08:00
//输入框
input: function(elem){
var inputs = elem || elemForm.find('input,textarea');
2021-05-31 08:57:00 +08:00
//初始化全局的 autocomplete
options.autocomplete && inputs.attr('autocomplete', options.autocomplete);
}
2017-08-21 08:51:13 +08:00
//下拉选择框
,select: function(elem){
2017-08-21 08:51:13 +08:00
var TIPS = '请选择', CLASS = 'layui-form-select', TITLE = 'layui-select-title'
,NONE = 'layui-select-none', initValue = '', thatInput
,selects = elem || elemForm.find('select')
2018-05-08 15:51:37 +08:00
//隐藏 select
,hide = function(e, clear){
2017-08-21 08:51:13 +08:00
if(!$(e.target).parent().hasClass(TITLE) || clear){
$('.'+CLASS).removeClass(CLASS+'ed ' + CLASS+'up');
thatInput && initValue && thatInput.val(initValue);
}
thatInput = null;
}
2018-05-08 15:51:37 +08:00
//各种事件
2017-08-21 08:51:13 +08:00
,events = function(reElem, disabled, isSearch){
var select = $(this)
,title = reElem.find('.' + TITLE)
,input = title.find('input')
,dl = reElem.find('dl')
,dds = dl.children('dd')
,dts = dl.children('dt') // select分组dt元素
2018-05-08 15:51:37 +08:00
,index = this.selectedIndex //当前选中的索引
,nearElem; //select 组件当前选中的附近元素,用于辅助快捷键功能
2017-08-21 08:51:13 +08:00
if(disabled) return;
//展开下拉
var showDown = function(){
2018-05-08 15:51:37 +08:00
var top = reElem.offset().top + reElem.outerHeight() + 5 - $win.scrollTop()
2017-08-21 08:51:13 +08:00
,dlHeight = dl.outerHeight();
2018-05-08 15:51:37 +08:00
index = select[0].selectedIndex; //获取最新的 selectedIndex
2017-08-21 08:51:13 +08:00
reElem.addClass(CLASS+'ed');
dds.removeClass(HIDE);
dts.removeClass(HIDE);
2018-05-28 18:50:37 +08:00
nearElem = null;
2018-05-08 15:51:37 +08:00
//初始选中样式
dds.eq(index).addClass(THIS).siblings().removeClass(THIS);
2018-08-18 20:46:14 +08:00
2017-08-21 08:51:13 +08:00
//上下定位识别
2018-05-08 15:51:37 +08:00
if(top + dlHeight > $win.height() && top >= dlHeight){
2017-08-21 08:51:13 +08:00
reElem.addClass(CLASS + 'up');
}
2018-08-18 20:46:14 +08:00
followScroll();
}
//隐藏下拉
,hideDown = function(choose){
2017-08-21 08:51:13 +08:00
reElem.removeClass(CLASS+'ed ' + CLASS+'up');
input.blur();
2018-05-08 15:51:37 +08:00
nearElem = null;
2017-08-21 08:51:13 +08:00
if(choose) return;
notOption(input.val(), function(none){
2018-11-01 02:50:21 +08:00
var selectedIndex = select[0].selectedIndex;
2018-11-02 09:41:00 +08:00
//未查询到相关值
2017-08-21 08:51:13 +08:00
if(none){
2018-11-01 02:50:21 +08:00
initValue = $(select[0].options[selectedIndex]).html(); //重新获得初始选中值
2018-11-02 09:41:00 +08:00
//如果是第一项,且文本值等于 placeholder则清空初始值
if(selectedIndex === 0 && initValue === input.attr('placeholder')){
initValue = '';
};
//如果有选中值,则将输入框纠正为该值。否则清空输入框
input.val(initValue || '');
2017-08-21 08:51:13 +08:00
}
});
2018-08-18 20:46:14 +08:00
}
//定位下拉滚动条
,followScroll = function(){
var thisDd = dl.children('dd.'+ THIS);
if(!thisDd[0]) return;
var posTop = thisDd.position().top
,dlHeight = dl.height()
,ddHeight = thisDd.height();
//若选中元素在滚动条不可见底部
if(posTop > dlHeight){
dl.scrollTop(posTop + dl.scrollTop() - dlHeight + ddHeight - 5);
}
//若选择玄素在滚动条不可见顶部
if(posTop < 0){
dl.scrollTop(posTop + dl.scrollTop() - 5);
}
2017-08-21 08:51:13 +08:00
};
//点击标题区域
title.on('click', function(e){
reElem.hasClass(CLASS+'ed') ? (
hideDown()
) : (
hide(e, true),
showDown()
);
dl.find('.'+NONE).remove();
});
//点击箭头获取焦点
title.find('.layui-edge').on('click', function(){
input.focus();
});
2018-05-08 15:51:37 +08:00
//select 中 input 键盘事件
input.on('keyup', function(e){ //键盘松开
2017-08-21 08:51:13 +08:00
var keyCode = e.keyCode;
2018-05-08 15:51:37 +08:00
//Tab键展开
2017-08-21 08:51:13 +08:00
if(keyCode === 9){
showDown();
}
2018-05-08 15:51:37 +08:00
}).on('keydown', function(e){ //键盘按下
2017-08-21 08:51:13 +08:00
var keyCode = e.keyCode;
2018-08-18 20:46:14 +08:00
2018-05-08 15:51:37 +08:00
//Tab键隐藏
2017-08-21 08:51:13 +08:00
if(keyCode === 9){
hideDown();
2018-05-05 16:59:53 +08:00
}
2018-05-08 15:51:37 +08:00
//标注 dd 的选中状态
2018-08-18 20:46:14 +08:00
var setThisDd = function(prevNext, thisElem1){
var nearDd, cacheNearElem
2017-08-21 08:51:13 +08:00
e.preventDefault();
2018-08-18 20:46:14 +08:00
2018-05-08 15:51:37 +08:00
//得到当前队列元素
2018-08-18 20:46:14 +08:00
var thisElem = function(){
var thisDd = dl.children('dd.'+ THIS);
//如果是搜索状态,且按 Down 键,且当前可视 dd 元素在选中元素之前,
//则将当前可视 dd 元素的上一个元素作为虚拟的当前选中元素,以保证递归不中断
if(dl.children('dd.'+ HIDE)[0] && prevNext === 'next'){
var showDd = dl.children('dd:not(.'+ HIDE +',.'+ DISABLED +')')
,firstIndex = showDd.eq(0).index();
if(firstIndex >=0 && firstIndex < thisDd.index() && !showDd.hasClass(THIS)){
return showDd.eq(0).prev()[0] ? showDd.eq(0).prev() : dl.children(':last');
}
}
if(thisElem1 && thisElem1[0]){
return thisElem1;
2018-05-08 15:51:37 +08:00
}
if(nearElem && nearElem[0]){
return nearElem;
}
2018-08-18 20:46:14 +08:00
return thisDd;
//return dds.eq(index);
2018-05-08 15:51:37 +08:00
}();
cacheNearElem = thisElem[prevNext](); //当前元素的附近元素
2018-08-18 20:46:14 +08:00
nearDd = thisElem[prevNext]('dd:not(.'+ HIDE +')'); //当前可视元素的 dd 元素
//如果附近的元素不存在,则停止执行,并清空 nearElem
if(!cacheNearElem[0]) return nearElem = null;
2018-05-08 15:51:37 +08:00
//记录附近的元素,让其成为下一个当前元素
nearElem = thisElem[prevNext]();
2018-05-05 16:59:53 +08:00
2018-05-08 15:51:37 +08:00
//如果附近不是 dd ,或者附近的 dd 元素是禁用状态,则进入递归查找
2018-08-18 20:46:14 +08:00
if((!nearDd[0] || nearDd.hasClass(DISABLED)) && nearElem[0]){
2018-05-08 15:51:37 +08:00
return setThisDd(prevNext, nearElem);
2018-05-05 16:59:53 +08:00
}
2018-08-18 20:46:14 +08:00
nearDd.addClass(THIS).siblings().removeClass(THIS); //标注样式
followScroll(); //定位滚动条
2018-05-08 15:51:37 +08:00
};
if(keyCode === 38) setThisDd('prev'); //Up 键
if(keyCode === 40) setThisDd('next'); //Down 键
//Enter 键
if(keyCode === 13){
e.preventDefault();
dl.children('dd.'+THIS).trigger('click');
2017-08-21 08:51:13 +08:00
}
});
2018-05-08 15:51:37 +08:00
//检测值是否不属于 select 项
2017-08-21 08:51:13 +08:00
var notOption = function(value, callback, origin){
var num = 0;
layui.each(dds, function(){
var othis = $(this)
,text = othis.text()
,not = text.indexOf(value) === -1;
if(value === '' || (origin === 'blur') ? value !== text : not) num++;
origin === 'keyup' && othis[not ? 'addClass' : 'removeClass'](HIDE);
});
// 处理select分组元素
origin === 'keyup' && layui.each(dts, function(){
var othis = $(this)
,thisDds = othis.nextUntil('dt').filter('dd') // 当前分组下的dd元素
,allHide = thisDds.length == thisDds.filter('.' + HIDE).length; // 当前分组下所有dd元素都隐藏了
othis[allHide ? 'addClass' : 'removeClass'](HIDE);
});
2017-08-21 08:51:13 +08:00
var none = num === dds.length;
return callback(none), none;
};
//搜索匹配
var search = function(e){
var value = this.value, keyCode = e.keyCode;
if(keyCode === 9 || keyCode === 13
|| keyCode === 37 || keyCode === 38
|| keyCode === 39 || keyCode === 40
){
return false;
}
notOption(value, function(none){
if(none){
dl.find('.'+NONE)[0] || dl.append('<p class="'+ NONE +'">无匹配项</p>');
} else {
dl.find('.'+NONE).remove();
}
}, 'keyup');
if(value === ''){
dl.find('.'+NONE).remove();
}
2018-08-18 20:46:14 +08:00
followScroll(); //定位滚动条
2017-08-21 08:51:13 +08:00
};
2017-11-15 11:57:51 +08:00
2017-08-21 08:51:13 +08:00
if(isSearch){
input.on('keyup', search).on('blur', function(e){
2018-05-08 15:51:37 +08:00
var selectedIndex = select[0].selectedIndex;
2018-11-02 09:41:00 +08:00
2018-05-08 15:51:37 +08:00
thatInput = input; //当前的 select 中的 input 元素
initValue = $(select[0].options[selectedIndex]).html(); //重新获得初始选中值
2018-11-02 09:41:00 +08:00
//如果是第一项,且文本值等于 placeholder则清空初始值
if(selectedIndex === 0 && initValue === input.attr('placeholder')){
initValue = '';
};
2017-08-21 08:51:13 +08:00
setTimeout(function(){
notOption(input.val(), function(none){
2017-11-15 11:57:51 +08:00
initValue || input.val(''); //none && !initValue
2017-08-21 08:51:13 +08:00
}, 'blur');
}, 200);
});
}
//选择
dds.on('click', function(){
var othis = $(this), value = othis.attr('lay-value');
var filter = select.attr('lay-filter'); //获取过滤器
2018-05-08 15:51:37 +08:00
2017-08-21 08:51:13 +08:00
if(othis.hasClass(DISABLED)) return false;
if(othis.hasClass('layui-select-tips')){
input.val('');
} else {
input.val(othis.text());
othis.addClass(THIS);
}
2018-05-05 16:59:53 +08:00
2017-08-21 08:51:13 +08:00
othis.siblings().removeClass(THIS);
select.val(value).removeClass('layui-form-danger')
layui.event.call(this, MOD_NAME, 'select('+ filter +')', {
elem: select[0]
,value: value
,othis: reElem
});
hideDown(true);
return false;
});
reElem.find('dl>dt').on('click', function(e){
return false;
});
2018-05-08 15:51:37 +08:00
$(document).off('click', hide).on('click', hide); //点击其它元素关闭 select
2017-08-21 08:51:13 +08:00
}
selects.each(function(index, select){
var othis = $(this)
,hasRender = othis.next('.'+CLASS)
,disabled = this.disabled
,value = select.value
,selected = $(select.options[select.selectedIndex]) //获取当前选中项
,optionsFirst = select.options[0];
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
var isSearch = typeof othis.attr('lay-search') === 'string'
,placeholder = optionsFirst ? (
optionsFirst.value ? TIPS : (optionsFirst.innerHTML || TIPS)
) : TIPS;
//替代元素
2018-05-08 15:51:37 +08:00
var reElem = $(['<div class="'+ (isSearch ? '' : 'layui-unselect ') + CLASS
,(disabled ? ' layui-select-disabled' : '') +'">'
,'<div class="'+ TITLE +'">'
2021-05-31 08:57:00 +08:00
,('<input type="text" placeholder="'+ $.trim(placeholder) +'" '
+('value="'+ $.trim(value ? selected.html() : '') +'"') //默认值
2020-01-15 06:30:00 +08:00
+((!disabled && isSearch) ? '' : ' readonly') //是否开启搜索
2018-05-08 15:51:37 +08:00
+' class="layui-input'
+(isSearch ? '' : ' layui-unselect')
+ (disabled ? (' ' + DISABLED) : '') +'">') //禁用状态
2017-08-21 08:51:13 +08:00
,'<i class="layui-edge"></i></div>'
2018-05-08 15:51:37 +08:00
,'<dl class="layui-anim layui-anim-upbit'+ (othis.find('optgroup')[0] ? ' layui-select-group' : '') +'">'
,function(options){
2017-08-21 08:51:13 +08:00
var arr = [];
layui.each(options, function(index, item){
if(index === 0 && !item.value){
2021-05-31 08:57:00 +08:00
arr.push('<dd lay-value="" class="layui-select-tips">'+ $.trim(item.innerHTML || TIPS) +'</dd>');
2017-08-21 08:51:13 +08:00
} else if(item.tagName.toLowerCase() === 'optgroup'){
arr.push('<dt>'+ item.label +'</dt>');
} else {
2021-05-31 08:57:00 +08:00
arr.push('<dd lay-value="'+ item.value +'" class="'+ (value === item.value ? THIS : '') + (item.disabled ? (' '+DISABLED) : '') +'">'+ $.trim(item.innerHTML) +'</dd>');
2017-08-21 08:51:13 +08:00
}
});
arr.length === 0 && arr.push('<dd lay-value="" class="'+ DISABLED +'">没有选项</dd>');
return arr.join('');
}(othis.find('*')) +'</dl>'
,'</div>'].join(''));
hasRender[0] && hasRender.remove(); //如果已经渲染则Rerender
othis.after(reElem);
events.call(this, reElem, disabled, isSearch);
});
}
2018-11-01 02:50:21 +08:00
2017-08-21 08:51:13 +08:00
//复选框/开关
,checkbox: function(elem){
2017-08-21 08:51:13 +08:00
var CLASS = {
checkbox: ['layui-form-checkbox', 'layui-form-checked', 'checkbox']
,_switch: ['layui-form-switch', 'layui-form-onswitch', 'switch']
}
,checks = elem || elemForm.find('input[type=checkbox]')
2017-08-21 08:51:13 +08:00
,events = function(reElem, RE_CLASS){
var check = $(this);
//勾选
reElem.on('click', function(){
var filter = check.attr('lay-filter') //获取过滤器
,text = (check.attr('lay-text')||'').split('|');
if(check[0].disabled) return;
check[0].checked ? (
check[0].checked = false
,reElem.removeClass(RE_CLASS[1]).find('em').text(text[1])
) : (
check[0].checked = true
,reElem.addClass(RE_CLASS[1]).find('em').text(text[0])
);
layui.event.call(check[0], MOD_NAME, RE_CLASS[2]+'('+ filter +')', {
elem: check[0]
,value: check[0].value
,othis: reElem
});
});
}
checks.each(function(index, check){
var othis = $(this), skin = othis.attr('lay-skin')
2018-05-08 15:51:37 +08:00
,text = (othis.attr('lay-text') || '').split('|'), disabled = this.disabled;
2017-08-21 08:51:13 +08:00
if(skin === 'switch') skin = '_'+skin;
var RE_CLASS = CLASS[skin] || CLASS.checkbox;
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
//替代元素
2018-05-08 15:51:37 +08:00
var hasRender = othis.next('.' + RE_CLASS[0])
,reElem = $(['<div class="layui-unselect '+ RE_CLASS[0]
,(check.checked ? (' '+ RE_CLASS[1]) : '') //选中状态
2021-05-31 08:57:00 +08:00
,(disabled ? ' layui-checkbox-disabled '+ DISABLED : '') //禁用状态
2018-05-08 15:51:37 +08:00
,'"'
,(skin ? ' lay-skin="'+ skin +'"' : '') //风格
,'>'
,function(){ //不同风格的内容
var title = check.title.replace(/\s/g, '')
,type = {
//复选框
checkbox: [
(title ? ('<span>'+ check.title +'</span>') : '')
,'<i class="layui-icon layui-icon-ok"></i>'
].join('')
//开关
,_switch: '<em>'+ ((check.checked ? text[0] : text[1]) || '') +'</em><i></i>'
};
return type[skin] || type['checkbox'];
}()
2017-08-21 08:51:13 +08:00
,'</div>'].join(''));
hasRender[0] && hasRender.remove(); //如果已经渲染则Rerender
othis.after(reElem);
events.call(this, reElem, RE_CLASS);
});
}
2018-11-01 02:50:21 +08:00
2017-08-21 08:51:13 +08:00
//单选框
,radio: function(elem){
2017-08-21 08:51:13 +08:00
var CLASS = 'layui-form-radio', ICON = ['&#xe643;', '&#xe63f;']
,radios = elem || elemForm.find('input[type=radio]')
2017-08-21 08:51:13 +08:00
,events = function(reElem){
var radio = $(this), ANIM = 'layui-anim-scaleSpring';
reElem.on('click', function(){
var name = radio[0].name, forms = radio.parents(ELEM);
var filter = radio.attr('lay-filter'); //获取过滤器
var sameRadio = forms.find('input[name='+ name.replace(/(\.|#|\[|\])/g, '\\$1') +']'); //找到相同name的兄弟
if(radio[0].disabled) return;
layui.each(sameRadio, function(){
var next = $(this).next('.'+CLASS);
this.checked = false;
next.removeClass(CLASS+'ed');
next.find('.layui-icon').removeClass(ANIM).html(ICON[1]);
});
radio[0].checked = true;
reElem.addClass(CLASS+'ed');
reElem.find('.layui-icon').addClass(ANIM).html(ICON[0]);
layui.event.call(radio[0], MOD_NAME, 'radio('+ filter +')', {
elem: radio[0]
,value: radio[0].value
,othis: reElem
});
});
};
radios.each(function(index, radio){
var othis = $(this), hasRender = othis.next('.' + CLASS), disabled = this.disabled;
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
2018-01-03 09:55:45 +08:00
hasRender[0] && hasRender.remove(); //如果已经渲染则Rerender
2017-08-21 08:51:13 +08:00
//替代元素
2018-05-08 15:51:37 +08:00
var reElem = $(['<div class="layui-unselect '+ CLASS
,(radio.checked ? (' '+CLASS+'ed') : '') //选中状态
2021-05-31 08:57:00 +08:00
,(disabled ? ' layui-radio-disabled '+DISABLED : '') +'">' //禁用状态
2017-08-21 08:51:13 +08:00
,'<i class="layui-anim layui-icon">'+ ICON[radio.checked ? 0 : 1] +'</i>'
2018-01-03 09:55:45 +08:00
,'<div>'+ function(){
var title = radio.title || '';
if(typeof othis.next().attr('lay-radio') === 'string'){
title = othis.next().html();
2021-05-08 06:31:19 +08:00
//othis.next().remove();
2018-01-03 09:55:45 +08:00
}
return title
}() +'</div>'
2017-08-21 08:51:13 +08:00
,'</div>'].join(''));
2018-01-03 09:55:45 +08:00
2017-08-21 08:51:13 +08:00
othis.after(reElem);
events.call(this, reElem);
});
}
};
2022-06-22 01:07:12 +08:00
if (layui.type(type) === 'object') {
// jquery 对象
type.each(function (index, item) {
var elem = $(item);
if (!elem.closest(ELEM).length) {
// 如果不是存在layui-form中的直接跳过
return;
}
if (item.tagName === 'SELECT') {
items['select'](elem);
} else if (item.tagName === 'INPUT') {
var itemType = item.type;
if (itemType === 'checkbox' || itemType === 'radio') {
items[itemType](elem);
} else {
items['input'](elem);
}
}
});
} else {
type ? (
items[type] ? items[type]() : hint.error('不支持的 "'+ type + '" 表单渲染')
) : layui.each(items, function(index, item){
item();
});
}
2017-08-21 08:51:13 +08:00
return that;
};
// verifyElem: 要验证的节点或者范围 返回验证通过返回true否则返回false
2022-06-22 01:07:12 +08:00
Form.prototype.validate = function(verifyElem){
2019-09-10 08:37:47 +08:00
var stop = null //验证不通过状态
,verify = form.config.verify //验证规则
,DANGER = 'layui-form-danger' //警示样式
if (layui.type(verifyElem) !== 'object') { // 不符合要求的格式直接判通过
2022-06-22 01:07:12 +08:00
hint.error('validate: 参数错误');
return true;
}
if (!verifyElem.attr('lay-verify')) {
// 验证某个容器内的节点
verifyElem = verifyElem.find('*[lay-verify]');
}
2017-08-21 08:51:13 +08:00
//开始校验
layui.each(verifyElem, function(_, item){
2017-11-15 11:57:51 +08:00
var othis = $(this)
,verifyStr = othis.attr('lay-verify') || ''
,vers = verifyStr.split('|')
,verType = othis.attr('lay-verType') //提示方式
,value = othis.val();
2019-09-10 08:37:47 +08:00
othis.removeClass(DANGER); //移除警示样式
//遍历元素绑定的验证规则
2017-11-15 11:57:51 +08:00
layui.each(vers, function(_, thisVer){
var isTrue //是否命中校验
,errorText = '' //错误提示文本
,isFn = typeof verify[thisVer] === 'function';
//匹配验证规则
if(verify[thisVer]){
2021-05-31 08:57:00 +08:00
var isTrue = isFn ? errorText = verify[thisVer](value, item) : !verify[thisVer][0].test(value)
//是否属于美化替换后的表单元素
,isForm2Elem = item.tagName.toLowerCase() === 'select' || /^checkbox|radio$/.test(item.type);
2017-11-15 11:57:51 +08:00
errorText = errorText || verify[thisVer][1];
2019-05-31 14:36:29 +08:00
if(thisVer === 'required'){
errorText = othis.attr('lay-reqText') || errorText;
}
2017-11-15 11:57:51 +08:00
//如果是必填项或者非空命中校验,则阻止提交,弹出提示
2017-11-27 23:44:54 +08:00
if(isTrue){
2017-11-15 11:57:51 +08:00
//提示层风格
if(verType === 'tips'){
2017-12-07 15:48:45 +08:00
layer.tips(errorText, function(){
if(typeof othis.attr('lay-ignore') !== 'string'){
2021-05-31 08:57:00 +08:00
if(isForm2Elem){
2017-12-07 15:48:45 +08:00
return othis.next();
}
}
return othis;
}(), {tips: 1});
2017-11-15 11:57:51 +08:00
} else if(verType === 'alert') {
layer.alert(errorText, {title: '提示', shadeClose: true});
2020-11-26 22:12:46 +08:00
}
//如果返回的为字符或数字,则自动弹出默认提示框;否则由 verify 方法中处理提示
else if(/\bstring|number\b/.test(typeof errorText)){
2017-11-15 11:57:51 +08:00
layer.msg(errorText, {icon: 5, shift: 6});
}
2019-05-31 14:36:29 +08:00
//非移动设备自动定位焦点
2021-05-31 08:57:00 +08:00
if(!device.mobile){
2019-05-31 14:36:29 +08:00
setTimeout(function(){
2021-05-31 08:57:00 +08:00
(isForm2Elem ? othis.next().find('input') : item).focus();
2019-05-31 14:36:29 +08:00
}, 7);
2021-05-31 08:57:00 +08:00
} else { //移动设备定位
$dom.scrollTop(function(){
try {
2022-06-22 01:07:12 +08:00
return (isForm2Elem ? othis.next() : othis).offset().top - 15
2021-05-31 08:57:00 +08:00
} catch(e){
return 0;
}
}());
2019-05-31 14:36:29 +08:00
}
2017-11-15 11:57:51 +08:00
othis.addClass(DANGER);
return stop = true;
2017-08-21 08:51:13 +08:00
}
}
});
if(stop) return stop;
});
return !stop;
}
//表单提交校验
var submit = function(){
var field = {} //字段集合
,button = $(this) //当前触发的按钮
,elem = button.parents(ELEM).eq(0) //当前所在表单域
,verifyElem = elem.find('*[lay-verify]') //获取需要校验的元素
,formElem = button.parents('form')[0] //获取当前所在的 form 元素,如果存在的话
,filter = button.attr('lay-filter'); //获取过滤器
//开始校验
2022-06-22 01:07:12 +08:00
if(!form.validate(verifyElem)) return false;
2019-09-10 08:37:47 +08:00
//获取当前表单值
field = form.getValue(null, elem);
2017-08-21 08:51:13 +08:00
2019-09-10 08:37:47 +08:00
//返回字段
2017-08-21 08:51:13 +08:00
return layui.event.call(this, MOD_NAME, 'submit('+ filter +')', {
elem: this
,form: formElem
,field: field
});
};
//自动完成渲染
var form = new Form()
2018-05-08 15:51:37 +08:00
,$dom = $(document), $win = $(window);
2017-08-21 08:51:13 +08:00
2021-04-06 16:01:23 +08:00
$(function(){
form.render();
});
2017-08-21 08:51:13 +08:00
//表单reset重置渲染
2018-05-08 15:51:37 +08:00
$dom.on('reset', ELEM, function(){
2017-08-21 08:51:13 +08:00
var filter = $(this).attr('lay-filter');
setTimeout(function(){
form.render(null, filter);
}, 50);
});
//表单提交事件
2018-05-08 15:51:37 +08:00
$dom.on('submit', ELEM, submit)
2017-08-21 08:51:13 +08:00
.on('click', '*[lay-submit]', submit);
exports(MOD_NAME, form);
});