fix(form): 修复 select 组件的字符转义问题 (#2661)

* fix(form): 修复 select 组件的字符转义问题

* Update src/modules/form.js

Co-authored-by: morning-star <26325820+Sight-wcg@users.noreply.github.com>

---------

Co-authored-by: morning-star <26325820+Sight-wcg@users.noreply.github.com>
2.9.x-stable
贤心 2025-05-06 15:33:31 +08:00
parent 467a8de205
commit 0a80e99024
2 changed files with 285 additions and 201 deletions

View File

@ -6,7 +6,7 @@
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="telephone=no">
@ -140,7 +140,7 @@
<div class="layui-col-md12"> <div class="layui-col-md12">
<button class="layui-btn" id="testSubmit">立即提交</button> <button class="layui-btn" id="testSubmit">立即提交</button>
</div> </div>
</div> </div>
</form> </form>
<hr> <hr>
@ -163,7 +163,7 @@
<div class="layui-input-inline"> <div class="layui-input-inline">
<input type="text" name="vercode" lay-verify="required" autocomplete="off" class="layui-input"> <input type="text" name="vercode" lay-verify="required" autocomplete="off" class="layui-input">
</div> </div>
<div class="layui-form-mid" style="padding: 0!important;"> <div class="layui-form-mid" style="padding: 0!important;">
<button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button> <button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>
</div> </div>
</div> </div>
@ -200,8 +200,8 @@
<div class="layui-inline"> <div class="layui-inline">
<label class="layui-form-label">行内表单</label> <label class="layui-form-label">行内表单</label>
<div class="layui-input-block"> <div class="layui-input-block">
<select name="quiz" lay-verify="required" lay-vertype="tips" lay-filter="quiz111"> <select name="quiz" lay-verify="required" lay-vertype="tips" lay-filter="quiz">
<option value="">请"选择"问题</option> <option value="">请"选择"问题&nbsp;&nbsp;&nbsp;😀</option>
<option value="0">你工"作"的 第一个城市</option> <option value="0">你工"作"的 第一个城市</option>
<option value="1" disabled>你的工号</option> <option value="1" disabled>你的工号</option>
<option value="2"> <option value="2">
@ -213,7 +213,7 @@
<div class="layui-inline"> <div class="layui-inline">
<label class="layui-form-label">select分组</label> <label class="layui-form-label">select分组</label>
<div class="layui-input-block"> <div class="layui-input-block">
<select name="quiz" lay-filter="quiz"> <select name="quiz111" lay-filter="quiz111">
<option value="">请选择问题</option> <option value="">请选择问题</option>
<optgroup label="城市记忆"> <optgroup label="城市记忆">
<option value="0">你工作的第一个城市</option> <option value="0">你工作的第一个城市</option>
@ -226,7 +226,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">选择框</label> <label class="layui-form-label">选择框</label>
<div class="layui-input-block"> <div class="layui-input-block">
@ -240,12 +240,12 @@
</select> </select>
</div> </div>
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item">
<div class="layui-inline"> <div class="layui-inline">
<label class="layui-form-label">搜索选择框</label> <label class="layui-form-label">搜索选择框</label>
<div class="layui-input-block"> <div class="layui-input-block">
<select name="interest-search" lay-filter="interest-search" lay-search=""> <select name="interest-search" lay-filter="interest-search" lay-search="" lay-creatable>
<option value="">请搜索</option> <option value="">请搜索</option>
<option value="写作">写"作"</option> <option value="写作">写"作"</option>
<option value="阅读" disabled>阅读</option> <option value="阅读" disabled>阅读</option>
@ -309,7 +309,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="layui-form-item" pane> <div class="layui-form-item" pane>
<label class="layui-form-label">复选框</label> <label class="layui-form-label">复选框</label>
<div class="layui-input-block"> <div class="layui-input-block">
@ -398,14 +398,14 @@
} }
} }
}); });
/* /*
form.on('submit(top)', function(data){ form.on('submit(top)', function(data){
console.log(data); console.log(data);
return false; return false;
}); });
*/ */
//方法提交 //方法提交
$('#testSubmit').on('click', function(){ $('#testSubmit').on('click', function(){
form.submit('top', function(data){ form.submit('top', function(data){
@ -416,18 +416,18 @@
setTimeout(function(){ setTimeout(function(){
alert(JSON.stringify(data.field)); alert(JSON.stringify(data.field));
}) })
}); });
}); });
return false; return false;
}); });
//日期 //日期
laydate.render({ laydate.render({
elem: '#date' elem: '#date'
}); });
//初始赋值 //初始赋值
var thisValue = form.val('first', { var thisValue = form.val('first', {
'title': '测试测试测试' 'title': '测试测试测试'
@ -449,32 +449,32 @@
var elem = data.elem; var elem = data.elem;
elem.value = '通过自定义事件设置的值'; elem.value = '通过自定义事件设置的值';
}); });
//事件 //事件
form.on('select(quiz111)', function(data){
console.log('select: ', this, data);
});
form.on('select(quiz)', function(data){ form.on('select(quiz)', function(data){
console.log('select.quiz', this, data); console.log('select.quiz: ', this, data);
}); });
form.on('select(quiz111)', function(data){
console.log('select.quiz111', this, data);
});
form.on('select(interest)', function(data){ form.on('select(interest)', function(data){
console.log('select.interest: ', this, data); console.log('select.interest: ', this, data);
}); });
form.on('checkbox', function(data){ form.on('checkbox', function(data){
console.log(this.checked, data.elem.checked); console.log(this.checked, data.elem.checked);
}); });
form.on('switch', function(data){ form.on('switch', function(data){
console.log(data); console.log(data);
}); });
form.on('radio', function(data){ form.on('radio', function(data){
console.log(data); console.log(data);
}); });
// 提交事件 // 提交事件
form.on('submit(*)', function(data){ form.on('submit(*)', function(data){
console.log(data) console.log(data)
@ -497,12 +497,51 @@
} }
} }
}); });
}); });
</script> </script>
<h3>设置 lay-ignore 忽略渲染</h3>
<hr>
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">未设置 ignore 时:</div>
<div class="layui-inline">
<input type="checkbox" name="like[write]" title="checkbox">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">忽略指令直接设置:</div>
<div class="layui-inline">
<input type="checkbox" name="like[write]" lay-ignore title="写作">
<input type="radio" name="sex" value="1" lay-ignore title="男">
<select name="quiz" lay-ignore>
<option value="">请选择</option>
<option value="AAAAA" selected>AAAAA</option>
<option value="BBBBB">BBBBB</option>
<option value="CCCCC">CCCCC</option>
<option value="DDDDD" disabled>DDDDD</option>
<option value="EEEEE">EEEEE</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">忽略指令父元素设置:</div>
<div class="layui-inline" lay-ignore>
<input type="checkbox" name="like[write]" title="写作">
<input type="radio" name="sex" value="1" title="男">
<select name="quiz111">
<option value="">请选择</option>
<option value="AAAAA">AAAAA</option>
<option value="BBBBB">BBBBB</option>
<option value="CCCCC" selected>CCCCC</option>
<option value="DDDDD" disabled>DDDDD</option>
<option value="EEEEE">EEEEE</option>
</select>
</div>
</div>
</div>
<h3>原始表单调试:</h3> <h3>原始表单调试:</h3>
<hr> <hr>

View File

@ -1,17 +1,17 @@
/** /**
* form 表单组件 * form 表单组件
*/ */
layui.define(['lay', 'layer', 'util'], function(exports){ layui.define(['lay', 'layer', 'util'], function(exports){
"use strict"; "use strict";
var $ = layui.$; var $ = layui.$;
var layer = layui.layer; var layer = layui.layer;
var util = layui.util; var util = layui.util;
var hint = layui.hint(); var hint = layui.hint();
var device = layui.device(); var device = layui.device();
var needCheckboxFallback = lay.ie && parseFloat(lay.ie) === 8; var needCheckboxFallback = lay.ie && parseFloat(lay.ie) === 8;
var MOD_NAME = 'form'; var MOD_NAME = 'form';
var ELEM = '.layui-form'; var ELEM = '.layui-form';
var THIS = 'layui-this'; var THIS = 'layui-this';
@ -19,7 +19,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
var HIDE = 'layui-hide'; var HIDE = 'layui-hide';
var DISABLED = 'layui-disabled'; var DISABLED = 'layui-disabled';
var OUT_OF_RANGE = 'layui-input-number-out-of-range'; var OUT_OF_RANGE = 'layui-input-number-out-of-range';
var Form = function(){ var Form = function(){
this.config = { this.config = {
// 内置的验证规则 // 内置的验证规则
@ -68,14 +68,14 @@ layui.define(['lay', 'layer', 'util'], function(exports){
autocomplete: null // 全局 autocomplete 状态。 null 表示不干预 autocomplete: null // 全局 autocomplete 状态。 null 表示不干预
}; };
}; };
// 全局设置 // 全局设置
Form.prototype.set = function(options){ Form.prototype.set = function(options){
var that = this; var that = this;
$.extend(true, that.config, options); $.extend(true, that.config, options);
return that; return that;
}; };
// 验证规则设定 // 验证规则设定
Form.prototype.verify = function(settings){ Form.prototype.verify = function(settings){
var that = this; var that = this;
@ -89,21 +89,21 @@ layui.define(['lay', 'layer', 'util'], function(exports){
return filter ? ('[lay-filter="' + filter +'"]') : ''; return filter ? ('[lay-filter="' + filter +'"]') : '';
}()); }());
}; };
// 表单事件 // 表单事件
Form.prototype.on = function(events, callback){ Form.prototype.on = function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback); return layui.onevent.call(this, MOD_NAME, events, callback);
}; };
// 赋值/取值 // 赋值/取值
Form.prototype.val = function(filter, object){ Form.prototype.val = function(filter, object){
var that = this var that = this
,formElem = that.getFormElem(filter); ,formElem = that.getFormElem(filter);
// 遍历 // 遍历
formElem.each(function(index, item){ formElem.each(function(index, item){
var itemForm = $(this); var itemForm = $(this);
// 赋值 // 赋值
for(var key in object){ for(var key in object){
if(!lay.hasOwn(object, key)) continue; if(!lay.hasOwn(object, key)) continue;
@ -111,11 +111,11 @@ layui.define(['lay', 'layer', 'util'], function(exports){
var type; var type;
var value = object[key]; var value = object[key];
var itemElem = itemForm.find('[name="'+ key +'"]'); var itemElem = itemForm.find('[name="'+ key +'"]');
// 如果对应的表单不存在,则不执行 // 如果对应的表单不存在,则不执行
if(!itemElem[0]) continue; if(!itemElem[0]) continue;
type = itemElem[0].type; type = itemElem[0].type;
// 如果为复选框 // 如果为复选框
if(type === 'checkbox'){ if(type === 'checkbox'){
itemElem[0].checked = value; itemElem[0].checked = value;
@ -128,47 +128,47 @@ layui.define(['lay', 'layer', 'util'], function(exports){
} }
}; };
}); });
form.render(null, filter); form.render(null, filter);
// 返回值 // 返回值
return that.getValue(filter); return that.getValue(filter);
}; };
// 取值 // 取值
Form.prototype.getValue = function(filter, itemForm){ Form.prototype.getValue = function(filter, itemForm){
itemForm = itemForm || this.getFormElem(filter); itemForm = itemForm || this.getFormElem(filter);
var nameIndex = {} // 数组 name 索引 var nameIndex = {} // 数组 name 索引
,field = {} ,field = {}
,fieldElem = itemForm.find('input,select,textarea') // 获取所有表单域 ,fieldElem = itemForm.find('input,select,textarea') // 获取所有表单域
layui.each(fieldElem, function(_, item){ layui.each(fieldElem, function(_, item){
var othis = $(this) var othis = $(this)
,init_name; // 初始 name ,init_name; // 初始 name
item.name = (item.name || '').replace(/^\s*|\s*&/, ''); item.name = (item.name || '').replace(/^\s*|\s*&/, '');
if(!item.name) return; if(!item.name) return;
// 用于支持数组 name // 用于支持数组 name
if(/^.*\[\]$/.test(item.name)){ if(/^.*\[\]$/.test(item.name)){
var key = item.name.match(/^(.*)\[\]$/g)[0]; var key = item.name.match(/^(.*)\[\]$/g)[0];
nameIndex[key] = nameIndex[key] | 0; nameIndex[key] = nameIndex[key] | 0;
init_name = item.name.replace(/^(.*)\[\]$/, '$1['+ (nameIndex[key]++) +']'); init_name = item.name.replace(/^(.*)\[\]$/, '$1['+ (nameIndex[key]++) +']');
} }
if(/^(checkbox|radio)$/.test(item.type) && !item.checked) return; // 复选框和单选框未选中,不记录字段 if(/^(checkbox|radio)$/.test(item.type) && !item.checked) return; // 复选框和单选框未选中,不记录字段
// select 多选用 jQuery 方式取值,未选中 option 时, // select 多选用 jQuery 方式取值,未选中 option 时,
// jQuery v2.2.4 及以下版本返回 null以上(3.x) 返回 []。 // jQuery v2.2.4 及以下版本返回 null以上(3.x) 返回 []。
// 统一规范化为 [],参考 https://github.com/jquery/jquery/issues/2562 // 统一规范化为 [],参考 https://github.com/jquery/jquery/issues/2562
field[init_name || item.name] = (this.tagName === 'SELECT' && typeof this.getAttribute('multiple') === 'string') field[init_name || item.name] = (this.tagName === 'SELECT' && typeof this.getAttribute('multiple') === 'string')
? othis.val() || [] ? othis.val() || []
: this.value; : this.value;
}); });
return field; return field;
}; };
// 表单控件渲染 // 表单控件渲染
Form.prototype.render = function(type, filter){ Form.prototype.render = function(type, filter){
var that = this; var that = this;
@ -273,7 +273,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
}); });
return arr.join(''); return arr.join('');
}()); }());
elemAffix.append(elemIcon); // 插入图标元素 elemAffix.append(elemIcon); // 插入图标元素
// 追加 className // 追加 className
@ -298,8 +298,8 @@ layui.define(['lay', 'layer', 'util'], function(exports){
hasElemSuffix.prepend(elemAffix); hasElemSuffix.prepend(elemAffix);
othis.css('padding-right', function(){ othis.css('padding-right', function(){
var paddingRight = othis.closest('.layui-input-group')[0] var paddingRight = othis.closest('.layui-input-group')[0]
? 0 ? 0
: hasElemSuffix.outerWidth(); : hasElemSuffix.outerWidth();
return paddingRight + elemAffix.outerWidth() return paddingRight + elemAffix.outerWidth()
}); });
@ -309,9 +309,9 @@ layui.define(['lay', 'layer', 'util'], function(exports){
} }
opts.show === 'auto' && showAffix(elemAffix, othis.val()); opts.show === 'auto' && showAffix(elemAffix, othis.val());
typeof opts.init === 'function' && opts.init.call(this, othis, opts); typeof opts.init === 'function' && opts.init.call(this, othis, opts);
// 输入事件 // 输入事件
othis.on('input propertychange', function(){ othis.on('input propertychange', function(){
var value = this.value; var value = this.value;
@ -322,14 +322,14 @@ layui.define(['lay', 'layer', 'util'], function(exports){
othis.on('blur', function(){ othis.on('blur', function(){
typeof opts.blur === 'function' && opts.blur.call(this, othis, opts); typeof opts.blur === 'function' && opts.blur.call(this, othis, opts);
}); });
// 点击动态后缀事件 // 点击动态后缀事件
elemIcon.on('click', function(){ elemIcon.on('click', function(){
var inputFilter = othis.attr('lay-filter'); var inputFilter = othis.attr('lay-filter');
if($(this).hasClass(DISABLED)) return; if($(this).hasClass(DISABLED)) return;
typeof opts.click === 'function' && opts.click.call(this, othis, opts); typeof opts.click === 'function' && opts.click.call(this, othis, opts);
// 对外事件 // 对外事件
layui.event.call(this, MOD_NAME, 'input-affix('+ inputFilter +')', { layui.event.call(this, MOD_NAME, 'input-affix('+ inputFilter +')', {
elem: othis[0], elem: othis[0],
@ -338,7 +338,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
}); });
}); });
}; };
// 动态点缀配置项 // 动态点缀配置项
var affixOptions = { var affixOptions = {
eye: { // 密码显隐 eye: { // 密码显隐
@ -346,7 +346,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
click: function(elem, opts){ // 事件 click: function(elem, opts){ // 事件
var SHOW_NAME = 'LAY_FORM_INPUT_AFFIX_SHOW'; var SHOW_NAME = 'LAY_FORM_INPUT_AFFIX_SHOW';
var isShow = elem.data(SHOW_NAME); var isShow = elem.data(SHOW_NAME);
elem.attr('type', isShow ? 'password' : 'text').data(SHOW_NAME, !isShow); elem.attr('type', isShow ? 'password' : 'text').data(SHOW_NAME, !isShow);
renderAffix({ renderAffix({
@ -379,11 +379,11 @@ layui.define(['lay', 'layer', 'util'], function(exports){
}, },
} }
}; };
renderAffix(); renderAffix();
}); });
} }
// 下拉选择框 // 下拉选择框
,select: function(elem){ ,select: function(elem){
var TIPS = '请选择'; var TIPS = '请选择';
@ -406,11 +406,11 @@ layui.define(['lay', 'layer', 'util'], function(exports){
var index = this.selectedIndex; // 当前选中的索引 var index = this.selectedIndex; // 当前选中的索引
var initValue = ''; var initValue = '';
var removeClickOutsideEvent; var removeClickOutsideEvent;
if(disabled) return; if(disabled) return;
/** /**
* 搜索项 * 搜索项
* @typedef searchOption * @typedef searchOption
* @prop {boolean} [caseSensitive=false] 是否区分大小写 * @prop {boolean} [caseSensitive=false] 是否区分大小写
* @prop {boolean} [fuzzy=false] 是否开启模糊匹配开启后将会忽略模式出现在字符串中的位置 * @prop {boolean} [fuzzy=false] 是否开启模糊匹配开启后将会忽略模式出现在字符串中的位置
@ -425,7 +425,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
// IE10 和 11 中,带有占位符的 input 元素获得/失去焦点时,会触发 input 事件 // IE10 和 11 中,带有占位符的 input 元素获得/失去焦点时,会触发 input 事件
// 当鼠标按下时,根据 input 元素上的 __ieph 标识忽略 input 事件 // 当鼠标按下时,根据 input 元素上的 __ieph 标识忽略 input 事件
var needPlaceholderPatch = !!(lay.ie && (lay.ie === '10' || lay.ie === '11') && input.attr('placeholder')); var needPlaceholderPatch = !!(lay.ie && (lay.ie === '10' || lay.ie === '11') && input.attr('placeholder'));
// 展开下拉 // 展开下拉
var showDown = function(){ var showDown = function(){
if(isAppendTo){ if(isAppendTo){
@ -446,7 +446,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
var top = reElem.offset().top + reElem.outerHeight() + 5 - $win.scrollTop(); var top = reElem.offset().top + reElem.outerHeight() + 5 - $win.scrollTop();
var dlHeight = dl.outerHeight(); var dlHeight = dl.outerHeight();
var dds = dl.children('dd'); var dds = dl.children('dd');
index = select[0].selectedIndex; // 获取最新的 selectedIndex index = select[0].selectedIndex; // 获取最新的 selectedIndex
title.parent().addClass(CLASS+'ed'); title.parent().addClass(CLASS+'ed');
dds.removeClass(HIDE); dds.removeClass(HIDE);
@ -481,7 +481,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
{ignore: title} {ignore: title}
); );
}; };
// 隐藏下拉 // 隐藏下拉
var hideDown = function(choose){ var hideDown = function(choose){
title.parent().removeClass(CLASS+'ed ' + CLASS+'up'); title.parent().removeClass(CLASS+'ed ' + CLASS+'up');
@ -492,16 +492,16 @@ layui.define(['lay', 'layer', 'util'], function(exports){
reElem.detach(); reElem.detach();
$(window).off('resize.lay_select_resize'); $(window).off('resize.lay_select_resize');
} }
if(choose) return; if(choose) return;
notOption(input.val(), function(none){ notOption(input.val(), function(none){
var selectedIndex = select[0].selectedIndex; var selectedIndex = select[0].selectedIndex;
// 未查询到相关值 // 未查询到相关值
if(none){ if(none){
initValue = $(select[0].options[selectedIndex]).html(); // 重新获得初始选中值 initValue = $(select[0].options[selectedIndex]).text(); // 重新获得初始选中值
// 如果是第一项,且文本值等于 placeholder则清空初始值 // 如果是第一项,且文本值等于 placeholder则清空初始值
if(selectedIndex === 0 && initValue === input.attr('placeholder')){ if(selectedIndex === 0 && initValue === input.attr('placeholder')){
initValue = ''; initValue = '';
@ -512,28 +512,28 @@ layui.define(['lay', 'layer', 'util'], function(exports){
} }
}); });
}; };
// 定位下拉滚动条 // 定位下拉滚动条
var followScroll = function(){ var followScroll = function(){
var thisDd = dl.children('dd.'+ THIS); var thisDd = dl.children('dd.'+ THIS);
if(!thisDd[0]) return; if(!thisDd[0]) return;
var posTop = thisDd.position().top; var posTop = thisDd.position().top;
var dlHeight = dl.height(); var dlHeight = dl.height();
var ddHeight = thisDd.height(); var ddHeight = thisDd.height();
// 若选中元素在滚动条不可见底部 // 若选中元素在滚动条不可见底部
if(posTop > dlHeight){ if(posTop > dlHeight){
dl.scrollTop(posTop + dl.scrollTop() - dlHeight + ddHeight - 5); dl.scrollTop(posTop + dl.scrollTop() - dlHeight + ddHeight - 5);
} }
// 若选择元素在滚动条不可见顶部 // 若选择元素在滚动条不可见顶部
if(posTop < 0){ if(posTop < 0){
dl.scrollTop(posTop + dl.scrollTop() - 5); dl.scrollTop(posTop + dl.scrollTop() - 5);
} }
}; };
// 点击标题区域 // 点击标题区域
title.on('click', function(e){ title.on('click', function(e){
title.parent().hasClass(CLASS+'ed') ? ( title.parent().hasClass(CLASS+'ed') ? (
@ -542,17 +542,17 @@ layui.define(['lay', 'layer', 'util'], function(exports){
showDown() showDown()
); );
dl.find('.'+NONE).remove(); dl.find('.'+NONE).remove();
}); });
// 点击箭头获取焦点 // 点击箭头获取焦点
title.find('.layui-edge').on('click', function(){ title.find('.layui-edge').on('click', function(){
input.focus(); input.focus();
}); });
// select 中 input 键盘事件 // select 中 input 键盘事件
input.on('keyup', function(e){ // 键盘松开 input.on('keyup', function(e){ // 键盘松开
var keyCode = e.keyCode; var keyCode = e.keyCode;
// Tab键展开 // Tab键展开
if(keyCode === 9){ if(keyCode === 9){
showDown(); showDown();
@ -564,7 +564,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
if(keyCode === 9){ if(keyCode === 9){
hideDown(); hideDown();
} }
// 标注 dd 的选中状态 // 标注 dd 的选中状态
var setThisDd = function(prevNext){ var setThisDd = function(prevNext){
e.preventDefault(); e.preventDefault();
@ -580,7 +580,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
return true; return true;
} }
}) })
var nextIndex = prevNext === 'prev' var nextIndex = prevNext === 'prev'
? (selectedIndex - 1 < firstIndex ? lastIndex : selectedIndex - 1) ? (selectedIndex - 1 < firstIndex ? lastIndex : selectedIndex - 1)
: (selectedIndex + 1 > lastIndex ? firstIndex : selectedIndex + 1) : (selectedIndex + 1 > lastIndex ? firstIndex : selectedIndex + 1)
@ -589,19 +589,19 @@ layui.define(['lay', 'layer', 'util'], function(exports){
selectedElem.addClass(THIS).siblings().removeClass(THIS); // 标注样式 selectedElem.addClass(THIS).siblings().removeClass(THIS); // 标注样式
followScroll(); // 定位滚动条 followScroll(); // 定位滚动条
}; };
if(keyCode === 38) setThisDd('prev'); // Up 键 if(keyCode === 38) setThisDd('prev'); // Up 键
if(keyCode === 40) setThisDd('next'); // Down 键 if(keyCode === 40) setThisDd('next'); // Down 键
// Enter 键 // Enter 键
if(keyCode === 13){ if(keyCode === 13){
e.preventDefault(); e.preventDefault();
dl.children('dd.'+THIS).trigger('click'); dl.children('dd.'+THIS).trigger('click');
} }
}).on('paste', function(){ }).on('paste', function(){
showDown(); showDown();
}); });
// 检测值是否不属于 select 项 // 检测值是否不属于 select 项
var notOption = function(value, callback, origin){ var notOption = function(value, callback, origin){
var num = 0; var num = 0;
@ -629,10 +629,10 @@ layui.define(['lay', 'layer', 'util'], function(exports){
if(!laySearch.caseSensitive){ if(!laySearch.caseSensitive){
text = text.toLowerCase(); text = text.toLowerCase();
} }
// 匹配 // 匹配
var not = laySearch.fuzzy ? !fuzzyMatchRE.test(text) : text.indexOf(value) === -1; var not = laySearch.fuzzy ? !fuzzyMatchRE.test(text) : text.indexOf(value) === -1;
if(value === '' || (origin === 'blur') ? value !== text : not) num++; if(value === '' || (origin === 'blur') ? value !== text : not) num++;
origin === 'keyup' && othis[(isCreatable ? (not && !isCreateOption) : not) ? 'addClass' : 'removeClass'](HIDE); origin === 'keyup' && othis[(isCreatable ? (not && !isCreateOption) : not) ? 'addClass' : 'removeClass'](HIDE);
}); });
@ -647,23 +647,23 @@ layui.define(['lay', 'layer', 'util'], function(exports){
var none = num === dds.length; var none = num === dds.length;
return callback(none, hasEquals), none; return callback(none, hasEquals), none;
}; };
// 搜索匹配 // 搜索匹配
var search = function(e){ var search = function(e){
var value = this.value, keyCode = e.keyCode; var value = this.value, keyCode = e.keyCode;
if(keyCode === 9 || keyCode === 13 if(keyCode === 9 || keyCode === 13
|| keyCode === 37 || keyCode === 38 || keyCode === 37 || keyCode === 38
|| keyCode === 39 || keyCode === 40 || keyCode === 39 || keyCode === 40
){ ){
return false; return false;
} }
if(needPlaceholderPatch && e.target.__ieph){ if(needPlaceholderPatch && e.target.__ieph){
e.target.__ieph = false; e.target.__ieph = false;
return false; return false;
} }
notOption(value, function(none, hasEquals){ notOption(value, function(none, hasEquals){
if(isCreatable){ if(isCreatable){
if(hasEquals){ if(hasEquals){
@ -671,10 +671,10 @@ layui.define(['lay', 'layer', 'util'], function(exports){
}else{ }else{
var createOptionElem = dl.children('.' + CREATE_OPTION); var createOptionElem = dl.children('.' + CREATE_OPTION);
if(createOptionElem[0]){ if(createOptionElem[0]){
createOptionElem.attr('lay-value', value).html(util.escape(value)); createOptionElem.attr('lay-value', value).text(value);
}else{ }else{
// 临时显示在顶部 // 临时显示在顶部
var ddElem = $('<dd>').addClass(CREATE_OPTION).attr('lay-value', value).html(util.escape(value)); var ddElem = $('<dd>').addClass(CREATE_OPTION).attr('lay-value', value).text(value);
var firstOptionELem = dl.children().eq(0); var firstOptionELem = dl.children().eq(0);
var hasTips = firstOptionELem.hasClass('layui-select-tips'); var hasTips = firstOptionELem.hasClass('layui-select-tips');
firstOptionELem[hasTips ? 'after' : 'before'](ddElem); firstOptionELem[hasTips ? 'after' : 'before'](ddElem);
@ -688,7 +688,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
} }
} }
}, 'keyup'); }, 'keyup');
// 当搜索值清空时 // 当搜索值清空时
if(value === ''){ if(value === ''){
// 取消选中项 // 取消选中项
@ -698,21 +698,21 @@ layui.define(['lay', 'layer', 'util'], function(exports){
dl.find('.'+ NONE).remove(); dl.find('.'+ NONE).remove();
isCreatable && dl.children('.' + CREATE_OPTION).remove(); isCreatable && dl.children('.' + CREATE_OPTION).remove();
} }
followScroll(); // 定位滚动条 followScroll(); // 定位滚动条
}; };
if(isSearch){ if(isSearch){
input.on('input propertychange', layui.debounce(search, 50)).on('blur', function(e){ input.on('input propertychange', layui.debounce(search, 50)).on('blur', function(e){
var selectedIndex = select[0].selectedIndex; var selectedIndex = select[0].selectedIndex;
initValue = $(select[0].options[selectedIndex]).text(); // 重新获得初始选中值 initValue = $(select[0].options[selectedIndex]).text(); // 重新获得初始选中值
// 如果是第一项,且文本值等于 placeholder则清空初始值 // 如果是第一项,且文本值等于 placeholder则清空初始值
if(selectedIndex === 0 && initValue === input.attr('placeholder')){ if(selectedIndex === 0 && initValue === input.attr('placeholder')){
initValue = ''; initValue = '';
} }
setTimeout(function(){ setTimeout(function(){
notOption(input.val(), function(none){ notOption(input.val(), function(none){
initValue || input.val(''); // none && !initValue initValue || input.val(''); // none && !initValue
@ -725,9 +725,9 @@ layui.define(['lay', 'layer', 'util'], function(exports){
dl.on('click', 'dd', function(){ dl.on('click', 'dd', function(){
var othis = $(this), value = othis.attr('lay-value'); var othis = $(this), value = othis.attr('lay-value');
var filter = select.attr('lay-filter'); // 获取过滤器 var filter = select.attr('lay-filter'); // 获取过滤器
if(othis.hasClass(DISABLED)) return false; if(othis.hasClass(DISABLED)) return false;
if(othis.hasClass('layui-select-tips')){ if(othis.hasClass('layui-select-tips')){
input.val(''); input.val('');
} else { } else {
@ -759,7 +759,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
dl.on('mousedown pointerdown touchstart', function(e){ dl.on('mousedown pointerdown touchstart', function(e){
layui.stope(e); layui.stope(e);
}) })
reElem.find('dl>dt').on('click', function(e){ reElem.find('dl>dt').on('click', function(e){
return false; return false;
}); });
@ -777,81 +777,128 @@ layui.define(['lay', 'layer', 'util'], function(exports){
handleObj.handler(); handleObj.handler();
} }
}; };
// 初始渲染 select 组件选项 // 初始渲染 select 组件选项
selects.each(function(index, select){ selects.each(function(index, select) {
var othis = $(this); var othis = $(this);
var hasRender = othis.next('.'+CLASS); var hasRender = othis.next('.'+CLASS);
var disabled = this.disabled; var disabled = this.disabled;
var value = select.value; var value = select.value;
var selected = $(select.options[select.selectedIndex]); // 获取当前选中项 var selected = $(select.options[select.selectedIndex]); // 获取当前选中项
var optionsFirst = select.options[0]; var optionsFirst = select.options[0];
if(typeof othis.attr('lay-ignore') === 'string') return othis.show(); // 为忽略渲染的 select 元素保持原生显示状态
if (othis.closest('[lay-ignore]').length) {
var isSearch = typeof othis.attr('lay-search') === 'string' return othis.show();
var isCreatable = typeof othis.attr('lay-creatable') === 'string' && isSearch }
var isAppendTo = typeof othis.attr('lay-append-to') === 'string'
var isSearch = typeof othis.attr('lay-search') === 'string';
var isCreatable = typeof othis.attr('lay-creatable') === 'string' && isSearch;
var isAppendTo = typeof othis.attr('lay-append-to') === 'string';
var placeholder = optionsFirst var placeholder = optionsFirst
? (optionsFirst.value ? TIPS : (optionsFirst.innerHTML || TIPS)) ? (optionsFirst.value ? TIPS : (optionsFirst.innerText || TIPS))
: TIPS; : TIPS;
// 替代元素 // 用于替代 select 的外层容器
var reElem = $(['<div class="'+ (isSearch ? '' : 'layui-unselect ') + CLASS var selectWrapper = (function() {
,(disabled ? ' layui-select-disabled' : '') + '"></div>'].join('')); var elem = $('<div class="'+ CLASS +'"></div>');
if (!isSearch) {
elem.addClass('layui-unselect');
}
if (disabled) {
elem.addClass('layui-select-disabled');
}
return elem;
})();
var triggerElem = $([ var inputElem = (function() {
'<div class="'+ TITLE +'">' var elem = $('<input type="text" class="layui-input">');
,('<input type="text" placeholder="'+ util.escape($.trim(placeholder)) +'" '
+('value="'+ util.escape($.trim(value ? selected.html() : '')) +'"') // 默认值
+((!disabled && isSearch) ? '' : ' readonly') // 是否开启搜索
+' class="layui-input'
+(isSearch ? '' : ' layui-unselect')
+ (disabled ? (' ' + DISABLED) : '') +'">') // 禁用状态
,'<i class="layui-edge"></i>'
,'</div>'].join(''));
var contentElem = $(['<dl class="layui-anim layui-anim-upbit'+ (othis.find('optgroup')[0] ? ' layui-select-group' : '') +'">' // 设置占位符和默认值
,function(options){ elem.prop('placeholder', $.trim(placeholder));
elem.val($.trim(value ? selected.text() : ''));
// 设置未开启搜索或禁用时的输入框只读状态
if (!isSearch || disabled) {
elem.prop('readonly', true);
}
// 添加禁用状态时的 className
if (disabled) {
elem.addClass(DISABLED);
}
return elem;
})();
var titleElem = (function() {
var elem = $('<div class="'+ TITLE +'"></div>');
elem.append(inputElem);
elem.append('<i class="layui-edge"></i>');
return elem;
})();
var contentElem = (function() {
var elem = $('<dl class="layui-anim layui-anim-upbit"></dl>');
if (othis.find('optgroup')[0]) {
elem.addClass('layui-select-group');
}
var content = function() {
var arr = []; var arr = [];
layui.each(options, function(index, item){ layui.each(othis.find('optgroup,option'), function(index, item) {
var tagName = item.tagName.toLowerCase(); var tagName = item.tagName.toLowerCase();
var dd = $('<dd lay-value=""></dd>');
if(index === 0 && !item.value && tagName !== 'optgroup'){ if (index === 0 && !item.value && tagName !== 'optgroup') {
arr.push('<dd lay-value="" class="layui-select-tips">'+ $.trim(item.innerHTML || TIPS) +'</dd>'); dd.addClass('layui-select-tips');
} else if(tagName === 'optgroup'){ dd.text($.trim(item.innerText || TIPS));
arr.push('<dt>'+ item.label +'</dt>'); arr.push(dd.prop('outerHTML'));
} else if(tagName === 'optgroup') {
var dt = $('<dt></dt>');
dt.text(item.label);
arr.push(dt.prop('outerHTML'));
} else { } else {
arr.push('<dd lay-value="'+ util.escape(item.value) +'" class="'+ (value === item.value ? THIS : '') + (item.disabled ? (' '+DISABLED) : '') +'">'+ $.trim(item.innerHTML) +'</dd>'); dd.attr('lay-value', item.value);
if (value === item.value) {
dd.addClass(THIS);
}
if (item.disabled) {
dd.addClass(DISABLED);
}
dd.text($.trim(item.innerText));
arr.push(dd.prop('outerHTML'));
} }
}); });
arr.length === 0 && arr.push('<dd lay-value="" class="'+ DISABLED +'">没有选项</dd>'); if (arr.length === 0) {
arr.push('<dd lay-value="" class="'+ DISABLED +'">None</dd>');
}
return arr.join(''); return arr.join('');
}(othis.find('*')) +'</dl>' }();
].join('')); elem.html(content);
return elem;
// 如果已经渲染则Rerender })();
if(hasRender[0]){
if(isAppendTo){ // 如果已经渲染,则 Rerender
if (hasRender[0]) {
if (isAppendTo) {
var panelWrapElem = hasRender.data(PANEL_ELEM_DATA); var panelWrapElem = hasRender.data(PANEL_ELEM_DATA);
panelWrapElem && panelWrapElem.remove(); panelWrapElem && panelWrapElem.remove();
} }
hasRender.remove(); hasRender.remove();
} }
if(isAppendTo){ if (isAppendTo) {
reElem.append(triggerElem); selectWrapper.append(titleElem);
othis.after(reElem); othis.after(selectWrapper);
var contentWrapElem = $('<div class="'+ CLASS + ' ' + PANEL_WRAP +'"></div>').append(contentElem); var contentWrapElem = $('<div class="'+ CLASS + ' ' + PANEL_WRAP +'"></div>').append(contentElem);
reElem.data(PANEL_ELEM_DATA, contentWrapElem); // 将面板元素对象记录在触发元素 data 中,重新渲染时需要清理旧面板元素 selectWrapper.data(PANEL_ELEM_DATA, contentWrapElem); // 将面板元素对象记录在触发元素 data 中,重新渲染时需要清理旧面板元素
events.call(this, contentWrapElem, triggerElem, disabled, isSearch, isCreatable, isAppendTo); events.call(this, contentWrapElem, titleElem, disabled, isSearch, isCreatable, isAppendTo);
}else{ } else {
reElem.append(triggerElem).append(contentElem); selectWrapper.append(titleElem).append(contentElem);
othis.after(reElem); othis.after(selectWrapper);
events.call(this, reElem, triggerElem, disabled, isSearch, isCreatable, isAppendTo); events.call(this, selectWrapper, titleElem, disabled, isSearch, isCreatable, isAppendTo);
} }
}); });
} }
// 复选框/开关 // 复选框/开关
,checkbox: function(elem){ ,checkbox: function(elem){
var CLASS = { var CLASS = {
@ -872,14 +919,14 @@ layui.define(['lay', 'layer', 'util'], function(exports){
var skin = check.attr('lay-skin') || 'primary'; var skin = check.attr('lay-skin') || 'primary';
var isSwitch = skin === 'switch'; var isSwitch = skin === 'switch';
var isPrimary = skin === 'primary'; var isPrimary = skin === 'primary';
// 勾选 // 勾选
reElem.on('click', function(){ reElem.on('click', function(){
var filter = check.attr('lay-filter') // 获取过滤器 var filter = check.attr('lay-filter') // 获取过滤器
// 禁用 // 禁用
if(check[0].disabled) return; if(check[0].disabled) return;
// 半选 // 半选
if (check[0].indeterminate) { if (check[0].indeterminate) {
check[0].indeterminate = false; check[0].indeterminate = false;
@ -887,7 +934,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
// 开关 // 开关
check[0].checked = !check[0].checked check[0].checked = !check[0].checked
// 事件 // 事件
layui.event.call(check[0], MOD_NAME, RE_CLASS[2]+'('+ filter +')', { layui.event.call(check[0], MOD_NAME, RE_CLASS[2]+'('+ filter +')', {
elem: check[0], elem: check[0],
@ -898,7 +945,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
that.syncAppearanceOnPropChanged(this, 'checked', function(){ that.syncAppearanceOnPropChanged(this, 'checked', function(){
if(isSwitch){ if(isSwitch){
var title = (reElem.next('*[lay-checkbox]')[0] var title = (reElem.next('*[lay-checkbox]')[0]
? reElem.next().html() ? reElem.next().html()
: check.attr('title') || '' : check.attr('title') || ''
).split('|'); ).split('|');
@ -917,7 +964,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
}) })
} }
}; };
// 遍历复选框 // 遍历复选框
checks.each(function(index, check){ checks.each(function(index, check){
var othis = $(this); var othis = $(this);
@ -933,7 +980,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
// 替代元素 // 替代元素
var hasRender = othis.next('.' + RE_CLASS[0]); var hasRender = othis.next('.' + RE_CLASS[0]);
hasRender[0] && hasRender.remove(); // 若已经渲染,则 Rerender hasRender[0] && hasRender.remove(); // 若已经渲染,则 Rerender
// 若存在标题模板,则优先读取标题模板 // 若存在标题模板,则优先读取标题模板
var titleTplAttrs = []; var titleTplAttrs = [];
if(othis.next('[lay-checkbox]')[0]){ if(othis.next('[lay-checkbox]')[0]){
@ -951,7 +998,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
// 若为开关,则对 title 进行分隔解析 // 若为开关,则对 title 进行分隔解析
title = skin === 'switch' ? title.split('|') : [title]; title = skin === 'switch' ? title.split('|') : [title];
if(typeof othis.attr('lay-ignore') === 'string') return othis.show(); if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
// 处理 IE8 indeterminate 属性重新定义 get set 后无法设置值的问题 // 处理 IE8 indeterminate 属性重新定义 get set 后无法设置值的问题
@ -985,7 +1032,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
events.call(this, reElem, RE_CLASS); events.call(this, reElem, RE_CLASS);
}); });
} }
// 单选框 // 单选框
,radio: function(elem){ ,radio: function(elem){
var CLASS = 'layui-form-radio'; var CLASS = 'layui-form-radio';
@ -996,14 +1043,14 @@ layui.define(['lay', 'layer', 'util'], function(exports){
var events = function(reElem){ var events = function(reElem){
var radio = $(this); var radio = $(this);
var ANIM = 'layui-anim-scaleSpring'; var ANIM = 'layui-anim-scaleSpring';
reElem.on('click', function(){ reElem.on('click', function(){
var filter = radio.attr('lay-filter'); // 获取过滤器 var filter = radio.attr('lay-filter'); // 获取过滤器
if(radio[0].disabled) return; if(radio[0].disabled) return;
radio[0].checked = true; radio[0].checked = true;
layui.event.call(radio[0], MOD_NAME, 'radio('+ filter +')', { layui.event.call(radio[0], MOD_NAME, 'radio('+ filter +')', {
elem: radio[0], elem: radio[0],
value: radio[0].value, value: radio[0].value,
@ -1028,13 +1075,13 @@ layui.define(['lay', 'layer', 'util'], function(exports){
} }
}) })
}; };
// 初始渲染 // 初始渲染
radios.each(function(index, radio){ radios.each(function(index, radio){
var othis = $(this), hasRender = othis.next('.' + CLASS); var othis = $(this), hasRender = othis.next('.' + CLASS);
var disabled = this.disabled; var disabled = this.disabled;
var skin = othis.attr('lay-skin'); var skin = othis.attr('lay-skin');
if(typeof othis.attr('lay-ignore') === 'string') return othis.show(); if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
if(needCheckboxFallback){ if(needCheckboxFallback){
@ -1057,9 +1104,9 @@ layui.define(['lay', 'layer', 'util'], function(exports){
} }
} }
titleTplAttrs = titleTplAttrs.join(' '); titleTplAttrs = titleTplAttrs.join(' ');
// 替代元素 // 替代元素
var reElem = $(['<div class="layui-unselect '+ CLASS, var reElem = $(['<div class="layui-unselect '+ CLASS,
(radio.checked ? (' '+ CLASS +'ed') : ''), // 选中状态 (radio.checked ? (' '+ CLASS +'ed') : ''), // 选中状态
(disabled ? ' layui-radio-disabled '+DISABLED : '') +'"', // 禁用状态 (disabled ? ' layui-radio-disabled '+DISABLED : '') +'"', // 禁用状态
(skin ? ' lay-skin="'+ skin +'"' : ''), (skin ? ' lay-skin="'+ skin +'"' : ''),
@ -1112,7 +1159,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
} }
return that; return that;
}; };
/** /**
* checkbox radio 指定属性变化时自动更新 UI * checkbox radio 指定属性变化时自动更新 UI
* 只能用于 boolean 属性 * 只能用于 boolean 属性
@ -1139,12 +1186,12 @@ layui.define(['lay', 'layer', 'util'], function(exports){
handler.call(this); handler.call(this);
} }
}) })
); );
} }
} }
return function(elem, propName, handler){ return function(elem, propName, handler){
var originProps = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, propName); var originProps = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, propName);
Object.defineProperty(elem, propName, Object.defineProperty(elem, propName,
lay.extend({}, originProps, { lay.extend({}, originProps, {
// 此处的 get 是为了兼容 IE<9 // 此处的 get 是为了兼容 IE<9
@ -1195,31 +1242,31 @@ layui.define(['lay', 'layer', 'util'], function(exports){
value = typeof value === 'string' ? $.trim(value) : value; value = typeof value === 'string' ? $.trim(value) : value;
othis.removeClass(DANGER); // 移除警示样式 othis.removeClass(DANGER); // 移除警示样式
// 遍历元素绑定的验证规则 // 遍历元素绑定的验证规则
layui.each(vers, function(_, thisVer) { layui.each(vers, function(_, thisVer) {
var verst; // 校验结果 var verst; // 校验结果
var errorText = ''; // 错误提示文本 var errorText = ''; // 错误提示文本
var rule = verify[thisVer]; // 获取校验规则 var rule = verify[thisVer]; // 获取校验规则
// 匹配验证规则 // 匹配验证规则
if (rule) { if (rule) {
verst = typeof rule === 'function' verst = typeof rule === 'function'
? errorText = rule(value, item) ? errorText = rule(value, item)
: !rule[0].test(value); // 兼容早期数组中的正则写法 : !rule[0].test(value); // 兼容早期数组中的正则写法
// 是否属于美化替换后的表单元素 // 是否属于美化替换后的表单元素
var isForm2Elem = item.tagName.toLowerCase() === 'select' || ( var isForm2Elem = item.tagName.toLowerCase() === 'select' || (
/^(checkbox|radio)$/.test(item.type) /^(checkbox|radio)$/.test(item.type)
); );
errorText = errorText || rule[1]; errorText = errorText || rule[1];
// 获取自定义必填项提示文本 // 获取自定义必填项提示文本
if (thisVer === 'required') { if (thisVer === 'required') {
errorText = othis.attr('lay-reqtext') || errorText; errorText = othis.attr('lay-reqtext') || errorText;
} }
// 若命中校验规则 // 若命中校验规则
if (verst) { if (verst) {
// 提示层风格 // 提示层风格
@ -1234,7 +1281,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
}(), {tips: 1}); }(), {tips: 1});
} else if(verType === 'alert') { } else if(verType === 'alert') {
layer.alert(errorText, {title: '提示', shadeClose: true}); layer.alert(errorText, {title: '提示', shadeClose: true});
} }
// 若返回的为字符或数字,则自动弹出默认提示框;否则由 verify 方法中处理提示 // 若返回的为字符或数字,则自动弹出默认提示框;否则由 verify 方法中处理提示
else if(/\b(string|number)\b/.test(typeof errorText)) { else if(/\b(string|number)\b/.test(typeof errorText)) {
layer.msg(errorText, {icon: 5, shift: 6}); layer.msg(errorText, {icon: 5, shift: 6});
@ -1243,7 +1290,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
setTimeout(function() { setTimeout(function() {
(isForm2Elem ? othis.next().find('input') : item).focus(); (isForm2Elem ? othis.next().find('input') : item).focus();
}, 7); }, 7);
othis.addClass(DANGER); othis.addClass(DANGER);
return intercept = true; return intercept = true;
} }
@ -1262,13 +1309,13 @@ layui.define(['lay', 'layer', 'util'], function(exports){
var button = $(this); // 当前触发的按钮 var button = $(this); // 当前触发的按钮
// 表单域 lay-filter 属性值 // 表单域 lay-filter 属性值
var layFilter = typeof filter === 'string' var layFilter = typeof filter === 'string'
? filter ? filter
: button.attr('lay-filter'); : button.attr('lay-filter');
// 当前所在表单域 // 当前所在表单域
var elem = this.getFormElem var elem = this.getFormElem
? this.getFormElem(layFilter) ? this.getFormElem(layFilter)
: button.parents(ELEM).eq(0); : button.parents(ELEM).eq(0);
// 获取需要校验的元素 // 获取需要校验的元素
@ -1286,10 +1333,10 @@ layui.define(['lay', 'layer', 'util'], function(exports){
,form: this.getFormElem ? elem[0] : button.parents('form')[0] // 当前所在的 form 元素,如果存在的话 ,form: this.getFormElem ? elem[0] : button.parents('form')[0] // 当前所在的 form 元素,如果存在的话
,field: field // 当前表单数据 ,field: field // 当前表单数据
}; };
// 回调 // 回调
typeof callback === 'function' && callback(params); typeof callback === 'function' && callback(params);
// 事件 // 事件
return layui.event.call(this, MOD_NAME, 'submit('+ layFilter +')', params); return layui.event.call(this, MOD_NAME, 'submit('+ layFilter +')', params);
}; };
@ -1344,16 +1391,16 @@ layui.define(['lay', 'layer', 'util'], function(exports){
return true; return true;
} }
} }
var form = new Form(); var form = new Form();
var $dom = $(document); var $dom = $(document);
var $win = $(window); var $win = $(window);
// 初始自动完成渲染 // 初始自动完成渲染
$(function(){ $(function(){
form.render(); form.render();
}); });
// 表单 reset 重置渲染 // 表单 reset 重置渲染
$dom.on('reset', ELEM, function(){ $dom.on('reset', ELEM, function(){
var filter = $(this).attr('lay-filter'); var filter = $(this).attr('lay-filter');
@ -1361,12 +1408,10 @@ layui.define(['lay', 'layer', 'util'], function(exports){
form.render(null, filter); form.render(null, filter);
}, 50); }, 50);
}); });
// 表单提交事件 // 表单提交事件
$dom.on('submit', ELEM, submit) $dom.on('submit', ELEM, submit)
.on('click', '*[lay-submit]', submit); .on('click', '*[lay-submit]', submit);
exports(MOD_NAME, form); exports(MOD_NAME, form);
}); });