feat(form): 优化 lay-ignore 的判断逻辑 (#2585)

* feat: 修改ignore的判断逻辑；增加ignore的开发案例；

* Update src/modules/form.js

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

* Update src/modules/form.js

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

* Update src/modules/form.js

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

* Update src/modules/form.js

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

* test(form): 优化 lay-ignore 示例布局

* docs(form): 优化 lay-ignore 文档说明

* fix(form): 修复 tips 提示风格时对 lay-ignore 目标元素的判断问题

---------

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

docs/form/index.md

@@ -2,7 +2,7 @@
 title: 表单组件 form
 toc: true
 ---
- 
+
 # 表单组件 🔥
 
 > 表单组件`form`是包含输入框、选择框、复选框、开关、单选框等表单项组件的集合，主要用于对表单域进行各类动态化渲染和相关的交互操作。`form`是 Layui 最常用的组件之一。
@@ -121,7 +121,7 @@ form 还可以借助*栅格*实现更灵活的响应式布局。
 | lay-append-to <sup>2.9.12+</sup> <sup>实验性</sup> | `body` | 是否将 select 面板追加到 body 元素中。`<select>` 元素 **私有属性** |
 | lay-append-position <sup>2.9.12+</sup> <sup>实验性</sup> | `absolute` 绝对定位 (默认)<br>`fixed` 固定定位 | 用于设置 select 面板开启 `lay-append-to` 属性后的定位方式。`<select>` 元素 **私有属性** |
 | lay-submit | 无需值 | 设置元素（一般为`<button>` 标签）触发 `submit` 提交事件 |
-| lay-ignore | 无需值 | 设置表单元素忽略渲染，即让元素保留系统原始 UI 风格 |
+| lay-ignore | 无需值 | 设置表单元素忽略渲染，即让元素保留系统原始 UI 风格。注 <sup>2.10.2+</sup>：该属性若设置在 `<div>` 等父元素上，则该父元素下的所有表单均可被忽略渲染。 |
 
 
 <h2 id="render" lay-toc="{hot: true, level: 2}">渲染</h2>
@@ -139,12 +139,12 @@ form 还可以借助*栅格*实现更灵活的响应式布局。
 <form class="layui-form" lay-filter="test">
   动态插入的表单域
 </form>
-  
+
-<!-- import layui --> 
+<!-- import layui -->
 <script>
 layui.use(function(){
   var form = layui.form;
-  
+
   // 当表单元素被动态插入时，需主动进行组件渲染才能显示
   form.render(); // 渲染全部表单
   form.render('select'); // 仅渲染 select 元素
@@ -170,15 +170,15 @@ layui.use(function(){
   </select>
   <!-- 其他表单元素 -->
 </div>
- 
+
-<!-- import layui --> 
+<!-- import layui -->
-<script> 
+<script>
 layui.use('form', function(){
   var $ = layui.$;
   var form = layui.form;
-  
+
   // 定向渲染（一般当表单存在动态生成时，进行渲染）
-  // 传入需要渲染的相应表单元素的 jQuery 对象 
+  // 传入需要渲染的相应表单元素的 jQuery 对象
   form.render($('#form-id')); // 渲染 id="form-id" 的表单域中的所有表单项
   form.render($('#select-id')); // 仅渲染 id="select-id" 的表单项
 });
@@ -278,7 +278,7 @@ form.verify({
   obj.render()
 }}">
   <textarea>
-{{- d.include("/form/examples/form.verify.md") }}  
+{{- d.include("/form/examples/form.verify.md") }}
   </textarea>
 </pre>
 
@@ -297,7 +297,7 @@ form.verify({
   obj.render()
 }}">
   <textarea>
-{{- d.include("/form/examples/form.validate.md") }}  
+{{- d.include("/form/examples/form.validate.md") }}
   </textarea>
 </pre>
 
@@ -330,14 +330,14 @@ form.verify({
   obj.render()
 }}">
   <textarea>
-<form class="layui-form">  
+<form class="layui-form">
   <input type="text" name="nickname" lay-verify="required" class="layui-input">
   <hr>
   <button class="layui-btn" lay-submit lay-filter="demo-submit">提交按钮</button>
   <button class="layui-btn" id="test-btn-other">普通按钮</button>
 </form>
 
-<!-- import layui --> 
+<!-- import layui -->
 <script>
 layui.use(function(){
   var $ = layui.$;
@@ -370,7 +370,7 @@ layui.use(function(){
 
 ### **提交方法** <sup>2.7+</sup>
 
-`form.submit(filter, callback);` 
+`form.submit(filter, callback);`
 
 - 参数 `filter` 为表单域容器的 `lay-filter` 属性值
 - 参数 `callback` 为执行提交事件后的回调函数
@@ -384,7 +384,7 @@ layui.use(function(){
 <fieldset class="layui-elem-field">
   <legend>表单内部</legend>
   <div class="layui-field-box">
-    <form class="layui-form" lay-filter="form-demo-submit">  
+    <form class="layui-form" lay-filter="form-demo-submit">
       <input type="text" name="nickname" lay-verify="required" class="layui-input">
     </form>
   </div>
@@ -392,7 +392,7 @@ layui.use(function(){
 
 <button class="layui-btn" id="test-btn-submit">任意位置按钮</button>
 
-<!-- import layui --> 
+<!-- import layui -->
 <script>
 layui.use(function(){
   var $ = layui.$;
@@ -437,7 +437,7 @@ layui.use(function(){
 form.on('select', function(data){
   console.log(data);
 });
- 
+
 // 指向元素为 `<select lay-filter="test"></select>` 的选择事件
 form.on('select(test)', function(data){
   console.log(data);

examples/form.html

@@ -6,7 +6,7 @@
     <meta name="renderer" content="webkit">
     <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="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="format-detection" content="telephone=no">
 
@@ -140,7 +140,7 @@
       <div class="layui-col-md12">
         <button class="layui-btn" id="testSubmit">立即提交</button>
       </div>
-    </div>  
+    </div>
   </form>
 
   <hr>
@@ -163,7 +163,7 @@
       <div class="layui-input-inline">
         <input type="text" name="vercode" lay-verify="required" autocomplete="off" class="layui-input">
       </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>
       </div>
     </div>
@@ -226,7 +226,7 @@
         </div>
       </div>
     </div>
-    
+
     <div class="layui-form-item">
       <label class="layui-form-label">选择框</label>
       <div class="layui-input-block">
@@ -240,7 +240,7 @@
         </select>
       </div>
     </div>
-    
+
     <div class="layui-form-item">
       <div class="layui-inline">
         <label class="layui-form-label">搜索选择框</label>
@@ -309,7 +309,7 @@
         </div>
       </div>
     </div>
-    
+
     <div class="layui-form-item" pane>
       <label class="layui-form-label">复选框</label>
       <div class="layui-input-block">
@@ -398,14 +398,14 @@
         }
       }
     });
-    
+
     /*
     form.on('submit(top)', function(data){
       console.log(data);
       return false;
     });
     */
-    
+
     //方法提交
   $('#testSubmit').on('click', function(){
     form.submit('top', function(data){
@@ -416,18 +416,18 @@
         setTimeout(function(){
           alert(JSON.stringify(data.field));
         })
-        
+
       });
     });
     return false;
   });
-    
+
-    
+
     //日期
     laydate.render({
       elem: '#date'
     });
-    
+
     //初始赋值
     var thisValue = form.val('first', {
       'title': '测试测试测试'
@@ -449,32 +449,32 @@
       var elem = data.elem;
       elem.value = '通过自定义事件设置的值';
     });
-    
+
     //事件
     form.on('select(quiz111)', function(data){
       console.log('select: ', this, data);
     });
-    
+
     form.on('select(quiz)', function(data){
       console.log('select.quiz：', this, data);
     });
-    
+
     form.on('select(interest)', function(data){
       console.log('select.interest: ', this, data);
     });
-    
+
     form.on('checkbox', function(data){
       console.log(this.checked, data.elem.checked);
     });
-    
+
     form.on('switch', function(data){
       console.log(data);
     });
-    
+
     form.on('radio', function(data){
       console.log(data);
     });
-    
+
     // 提交事件
     form.on('submit(*)', function(data){
       console.log(data)
@@ -497,16 +497,54 @@
         }
       }
     });
-    
+
   });
 
   </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="quiz">
+          <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>
   <hr>
-
   <form id="test1" action="" target="_blank">
     <input type="radio" value="girl" disabled>
     <input type="checkbox" name="love[a]">
@@ -525,5 +563,6 @@
     <button type="submit">原始表单，测试提交</button>
   </form>
 
+  <br><br>
 </body>
 </html>

src/css/layui.css

@@ -766,7 +766,6 @@ hr.layui-border-black{border-width: 0 0 1px;}
 .layui-form select,
 .layui-form input[type=checkbox],
 .layui-form input[type=radio]{display: none;}
-.layui-form *[lay-ignore]{display: initial;}
 
 .layui-form-item{position: relative; margin-bottom: 15px; clear: both;}
 .layui-form-item:after{content:'\20'; clear: both; display: block; height:0;}

src/modules/form.js

@@ -863,7 +863,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
           var selected = $(select.options[select.selectedIndex]); // 获取当前选中项
           var optionsFirst = select.options[0];
           
-          if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
+          if(othis.closest('[lay-ignore]').length > 0) return othis.show();
           
           var isSearch = typeof othis.attr('lay-search') === 'string'
           var isCreatable = typeof othis.attr('lay-creatable') === 'string' && isSearch
@@ -1028,7 +1028,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
           // 若为开关，则对 title 进行分隔解析
           title = skin === 'switch' ? title.split('|') : [title];
           
-          if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
+          if(othis.closest('[lay-ignore]').length > 0) return othis.show();
 
           // 处理 IE8 indeterminate 属性重新定义 get set 后无法设置值的问题
           if(needCheckboxFallback){
@@ -1111,7 +1111,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
           var disabled = this.disabled;
           var skin = othis.attr('lay-skin');
           
-          if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
+          if(othis.closest('[lay-ignore]').length > 0) return othis.show();
 
           if(needCheckboxFallback){
             toggleAttribute.call(radio, 'lay-form-sync-checked', radio.checked);
@@ -1300,13 +1300,12 @@ layui.define(['lay', 'layer', 'util'], function(exports){
           if (verst) {
             // 提示层风格
             if (verType === 'tips') {
-              layer.tips(errorText, function(){
+              layer.tips(errorText, function() {
-                if(typeof othis.attr('lay-ignore') !== 'string'){
+                if (othis.closest('[lay-ignore]').length > 0) {
-                  if(isForm2Elem){
+                  return othis;
-                    return othis.next();
+                } else if(isForm2Elem) {
-                  }
+                  return othis.next();
                 }
-                return othis;
               }(), {tips: 1});
             } else if(verType === 'alert') {
               layer.alert(errorText, {title: '提示', shadeClose: true});