/** @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 = $(['
' , '
' , ('') //禁用状态 , '
' , '
' , function (options) { var arr = []; layui.each(options, function (index, item) { if (index === 0 && !item.value) { arr.push('
' + (item.innerHTML || TIPS) + '
'); } else if (item.tagName.toLowerCase() === 'optgroup') { arr.push('
' + item.label + '
'); } else { arr.push('
' + item.innerHTML + '
'); } }); arr.length === 0 && arr.push('
没有选项
'); return arr.join(''); }(othis.find('*')) + '
' , '
'].join('')); hasRender[0] && hasRender.remove(); //如果已经渲染,则Rerender othis.after(reElem); events.call(this, reElem, disabled, isSearch, readonly); }); } //复选框/开关 , checkbox: function () { var CLASS = { checkbox: ['layui-form-checkbox', 'layui-form-checked', 'checkbox'] , _switch: ['layui-form-switch', 'layui-form-onswitch', 'switch'] } , checks = elemForm.find('input[type=checkbox]') , 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; if ($(check[0]).attr('readonly') == 'readonly') 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') , text = (othis.attr('lay-text') || '').split('|'), disabled = this.disabled; if (skin === 'switch') skin = '_' + skin; var RE_CLASS = CLASS[skin] || CLASS.checkbox; if (typeof othis.attr('lay-ignore') === 'string') return othis.show(); //替代元素 var hasRender = othis.next('.' + RE_CLASS[0]) , reElem = $(['
' , function () { //不同风格的内容 var title = check.title.replace(/\s/g, '') , type = { //复选框 checkbox: [ (title ? ('' + check.title + '') : '') , '' ].join('') //开关 , _switch: '' + ((check.checked ? text[0] : text[1]) || '') + '' }; return type[skin] || type['checkbox']; }() , '
'].join('')); hasRender[0] && hasRender.remove(); //如果已经渲染,则Rerender othis.after(reElem); events.call(this, reElem, RE_CLASS); }); } //单选框 , radio: function () { var CLASS = 'layui-form-radio', ICON = ['', ''] , radios = elemForm.find('input[type=radio]') , 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; if ($(radio[0]).attr('readonly') == 'readonly') 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(); hasRender[0] && hasRender.remove(); //如果已经渲染,则Rerender //替代元素 var reElem = $(['
' //禁用状态 , '' + ICON[radio.checked ? 0 : 1] + '' , '
' + function () { var title = radio.title || ''; if (typeof othis.next().attr('lay-radio') === 'string') { title = othis.next().html(); othis.next().remove(); } return title }() + '
' , '
'].join('')); othis.after(reElem); events.call(this, reElem); }); } }; type ? ( items[type] ? items[type]() : hint.error('不支持的' + type + '表单渲染') ) : layui.each(items, function (index, item) { item(); }); return that; }; //表单提交校验 var submit = function () { var button = $(this), verify = form.config.verify, stop = null , DANGER = 'layui-form-danger', field = {}, 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'); //获取过滤器 //开始校验 layui.each(verifyElem, function (_, item) { var othis = $(this) , vers = othis.attr('lay-verify').split('|') , value , verType = othis.attr('lay-verType');//提示方式 if(typeof($(this).attr("zlcomponent"))=="undefined" || $(this)[0].tagName=='SELECT'){ value = othis.val(); }else{ value = othis.find("input").val(); } othis.removeClass(DANGER); //非空的情况才去校验 允许为空 modify by gk //if (!$.inArray("require", vers) && value == "") { } 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 && thisVer === 'required') || (isTrue && value)) { 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]++) + ']'); } // 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 layui.event.call(this, MOD_NAME, 'submit(' + filter + ')', { elem: this , form: formElem , field: field }); }; //自动完成渲染 var form = new Form() , $dom = $(document), $win = $(window); form.render(); //表单reset重置渲染 $dom.on('reset', ELEM, function () { var filter = $(this).attr('lay-filter'); setTimeout(function () { form.render(null, filter); }, 50); }); //表单提交事件 $dom.on('submit', ELEM, submit) .on('click', '*[lay-submit]', submit); exports(MOD_NAME, form); });