/** @Name:layui.form 表单组件 @Author:贤心 @License:MIT */ layui.define('layer', function (exports) { "use strict"; var $ = layui.$ , layer = layui.layer , hint = layui.hint() , device = layui.device() , MOD_NAME = 'form', ELEM = '.layui-form', THIS = 'layui-this' , SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled' , Form = function () { // 修改验证源码 排除为空时的验证 this.config = { verify: { required: [ /[\S]+/ , '必填项不能为空!' ] , phone: function (value) { var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/; var fourTel = /^(([4]00\d{0,1}\-)?(\d{3,4}\-)?(\d{3,4}))?$/; var eightTel = /^[8]00\d{7}$/ig; var fourTel = /^400[0-9]{7}/; var eightTel = /^800[0-9]{7}/; var telPhone = /^1\d{10}$/ if(value){ if(value.indexOf("-") != -1) { var num = (value.split('-')).length-1; if(!tel.test(value) && num==1){ return '请输入正确的固定电话!'; }else if(value.substring(0, 3)=='400' && !fourTel.test(value) && num==2){ return '请输入正确的400固话(400-6050-322或4000-809-009)!'; } }else if(value.substring(0, 3)=='800' && !eightTel.test(value)){ return '请输入正确的800固话(8007878789)!'; }else if(value.length == 11 && !telPhone.test(value)) { return '请输入正确的手机号!' }else if(value.length != 11 && !tel.test(value) && value.substring(0, 3)!='800' && value.substring(0, 3)!='400'){ return '请输入有效手机号或固定电话!' } } } // [ // /^1\d{10}$/ // , '请输入正确的手机号' // ] , email:function(value){ if(value && !/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(value)){ return '邮箱格式不正确!' } } // [ // /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/ // , '邮箱格式不正确' // ] , hrefurl: function(value){ if(value && !/(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/.test(value)){ return '链接格式不正确!' } } // [ // /(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/ // , '链接格式不正确' // ] , number: function (value) { if (isNaN(value)) return '只能填写数字' } , numberInt: function (value) { if (value && !/^\d+$/.test(value)) return '只能填写正整数' } , date: function(value){ if(value && !/^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/.test(value)){ return '日期格式不正确!' } } // [ // /^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/ // , '日期格式不正确' // ] , identity: function(value){ if(value && !/(^\d{15}$)|(^\d{17}(x|X|\d)$)/.test(value)){ return '请输入正确的身份证号!' } } // [ // /(^\d{15}$)|(^\d{17}(x|X|\d)$)/ // , '请输入正确的身份证号' // ] , postalCode: function (value) { if(value && !/^[0-9]{6}$/.test(value)){ return '请输入正确的邮政编码!' } } , url: function (value) { if(value && !/(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/.test(value)){ return '请输入正确的链接地址!' } } , name: function (value) { var reg = /^[\u4E00-\u9FA5·sA-Za-z]{2,32}$/; if(value && !reg.test(value)){ return '请输入正确的中英文名字,并且字符长度大于2小于等于32个字符!' } } , specialCharacters: function (value) { var regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im, regCn = /[·!#¥(——):;“”‘、,|《。》?、【】[\]]/im; if(value && (regEn.test(value) || regCn.test(value))){ return '不能输入特殊字符!' } } } }; }; //添加数组IndexOf方法 if (!Array.prototype.indexOf){ Array.prototype.indexOf = function(elt /*, from*/){ var len = this.length >>> 0; var from = Number(arguments[1]) || 0; from = (from < 0) ? Math.ceil(from) : Math.floor(from); if (from < 0) from += len; for (; from < len; from++){ if (from in this && this[from] === elt) return from; } return -1; }; } //全局设置 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; }; //表单事件监听 Form.prototype.on = function (events, callback) { return layui.onevent.call(this, MOD_NAME, events, callback); }; //初始赋值 Form.prototype.val = function (filter, object) { var that = this , formElem = $(ELEM + '[lay-filter="' + filter + '"]'); formElem.each(function (index, item) { var itemFrom = $(this); layui.each(object, function (key, value) { var itemElem = itemFrom.find('[name="' + key + '"]') , type; //如果对应的表单不存在,则不执行 if (!itemElem[0]) return; type = itemElem[0].type; //如果为复选框 if (type === 'checkbox') { itemElem[0].checked = value; } else if (type === 'radio') { //如果为单选框 itemElem.each(function () { if (this.value === value) { this.checked = true } }); } else { //其它类型的表单 itemElem.val(value); } }); }); form.render(null, filter); //返回值 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') //获取所有表单域 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]++) +']'); } // modify by gk 由于启用开关这类型的如果是关闭时候 提交from是不会出现在field里面的.改成value=1|0的 代表自定义打开|关闭的值. if (/^checkbox|radio$/.test(item.type)) { var valueformat = $(item).attr('valueformat'); if (valueformat) { item.checked ? field[item.name] = valueformat.split('|')[0] : field[item.name] = valueformat.split('|')[1]; } //modify by gk else if (!item.checked && $(item).attr('lay-skin')) { field[item.name] = '1'; }else if(!item.checked) { return } else { field[item.name] = item.value; } }else { field[item.name] = item.value; } }); return field; }; //表单控件渲染 Form.prototype.render = function (type, filter) { var that = this , elemForm = $(ELEM + function () { return filter ? ('[lay-filter="' + filter + '"]') : ''; }()) , items = { //扩展的组件渲染 排在第一位 extrCompoment: function () { var cmps = elemForm.find('[zlcomponent]'); cmps.each(function (index, cmp) { var objName = $(this).attr('name'); var WParam = { elem: cmp , value: undefined } var $elems = $(cmp.tagName + '[name="' + objName + '"]'); if ($elems.length > 0) { $elems.each(function (index, $elem) { if ($elem.attributes.loaded == undefined || $elem.attributes.loaded.nodeValue!='1') { layui.event('WM_USERDEF', 'WM_DRAW', WParam); } }); } }); }, //必填项添加星号标识 addAsterisk: function(){ var layVerify = elemForm.find('[lay-verify]'); layVerify.each(function () { var versArr = $(this).attr('lay-verify').split('|'), parentDiv = $(this).parents(".layui-input-block"), str = parentDiv.prev().text(), noStr = str.indexOf("*") === -1; if(noStr && (versArr.indexOf("required")>-1)){ parentDiv.prev().prepend('*'); }else{ return } }); }, //下拉选择框 select: function () { var TIPS = '请选择', CLASS = 'layui-form-select', TITLE = 'layui-select-title' , NONE = 'layui-select-none', initValue = '', thatInput , selects = elemForm.find('select') //隐藏 select , hide = function (e, clear) { if (!$(e.target).parent().hasClass(TITLE) || clear) { $('.' + CLASS).removeClass(CLASS + 'ed ' + CLASS + 'up'); thatInput && initValue && thatInput.val(initValue); } thatInput = null; } //各种事件 , events = function (reElem, disabled, isSearch,readonly) { var select = $(this) , title = reElem.find('.' + TITLE) , input = title.find('input') , dl = reElem.find('dl') , dds = dl.children('dd') , index = this.selectedIndex //当前选中的索引 , nearElem; //select 组件当前选中的附近元素,用于辅助快捷键功能 if (disabled) return; if (readonly) return; //展开下拉 var showDown = function () { var top = reElem.offset().top + reElem.outerHeight() + 5 - $win.scrollTop() , dlHeight = dl.outerHeight(); index = select[0].selectedIndex; //获取最新的 selectedIndex reElem.addClass(CLASS + 'ed'); dds.removeClass(HIDE); nearElem = null; //初始选中样式 dds.eq(index).addClass(THIS).siblings().removeClass(THIS); //上下定位识别 if (top + dlHeight > $win.height() && top >= dlHeight) { reElem.addClass(CLASS + 'up'); } followScroll(); } //隐藏下拉 , hideDown = function (choose) { reElem.removeClass(CLASS + 'ed ' + CLASS + 'up'); input.blur(); nearElem = null; if (choose) return; notOption(input.val(), function (none) { if (none) { initValue = dl.find('.' + THIS).html(); input && input.val(initValue); } }); } //定位下拉滚动条 , 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); } }; //点击标题区域 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(); }); //select 中 input 键盘事件 input.on('keyup', function (e) { //键盘松开 var keyCode = e.keyCode; //Tab键展开 if (keyCode === 9) { showDown(); } }).on('keydown', function (e) { //键盘按下 var keyCode = e.keyCode; //Tab键隐藏 if (keyCode === 9) { hideDown(); } //标注 dd 的选中状态 var setThisDd = function (prevNext, thisElem1) { var nearDd, cacheNearElem e.preventDefault(); //得到当前队列元素 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; } if (nearElem && nearElem[0]) { return nearElem; } return thisDd; //return dds.eq(index); }(); cacheNearElem = thisElem[prevNext](); //当前元素的附近元素 nearDd = thisElem[prevNext]('dd:not(.' + HIDE + ')'); //当前可视元素的 dd 元素 //如果附近的元素不存在,则停止执行,并清空 nearElem if (!cacheNearElem[0]) return nearElem = null; //记录附近的元素,让其成为下一个当前元素 nearElem = thisElem[prevNext](); //如果附近不是 dd ,或者附近的 dd 元素是禁用状态,则进入递归查找 if ((!nearDd[0] || nearDd.hasClass(DISABLED)) && nearElem[0]) { return setThisDd(prevNext, nearElem); } nearDd.addClass(THIS).siblings().removeClass(THIS); //标注样式 followScroll(); //定位滚动条 }; if (keyCode === 38) setThisDd('prev'); //Up 键 if (keyCode === 40) setThisDd('next'); //Down 键 //Enter 键 if (keyCode === 13) { e.preventDefault(); dl.children('dd.' + THIS).trigger('click'); } }); //检测值是否不属于 select 项 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); }); 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('
无匹配项
'); } else { dl.find('.' + NONE).remove(); } }, 'keyup'); if (value === '') { dl.find('.' + NONE).remove(); } followScroll(); //定位滚动条 }; if (isSearch) { input.on('keyup', search).on('blur', function (e) { var selectedIndex = select[0].selectedIndex; thatInput = input; //当前的 select 中的 input 元素 initValue = $(select[0].options[selectedIndex]).html(); //重新获得初始选中值 setTimeout(function () { notOption(input.val(), function (none) { initValue || input.val(''); //none && !initValue }, 'blur'); }, 200); }); } //选择 dds.on('click', function () { var othis = $(this), value = othis.attr('lay-value'); var filter = select.attr('lay-filter'); //获取过滤器 if (othis.hasClass(DISABLED)) return false; if (othis.hasClass('layui-select-tips')) { input.val(''); } else { input.val(othis.text()); othis.addClass(THIS); } 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; }); $(document).off('click', hide).on('click', hide); //点击其它元素关闭 select } selects.each(function (index, select) { var othis = $(this) , hasRender = othis.next('.' + CLASS) , disabled = this.disabled , readonly = othis.attr("readonly") , value = select.value // , selected = $(select.options[select.selectedIndex]) //获取当前选中项 , selected = $(select.options[select.selectedIndex == -1 ? 0 : 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; //替代元素 var reElem = $(['