layui简单组件使用 form input select date 等

卢小亦

已于 2022-09-19 16:28:18 修改

阅读量667

点赞数

分类专栏： layui 文章标签： layui javascript 前端

于 2022-09-19 16:23:33 首次发布

本文链接：https://blog.csdn.net/weixin_50147548/article/details/126935737

版权

layui 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

form表单样式

class样式
layui-form layui-form-pane ===>label标签会有灰色背景
layui-form ===>label标签无灰色背景

input

<form class="layui-form layui-form-pane" action="">
// layui-input-block layui-form-label
<div class="layui-form-item">
    <label class="layui-form-label">长输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
 <div class="layui-form-item">
    <label class="layui-form-label">短输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>

--------------------------------------------
在一行上的两个input  layui-inline
<div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">验证手机</label>
      <div class="layui-input-inline">
        <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">验证邮箱</label>
      <div class="layui-input-inline">
        <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
</form>

checkbox radio select 等

根据id进行赋值以后必须要渲染 from.render()

date

渲染date input type=text

 //常规用法
      laydate.render({
        elem: "#SearchProjectStart",//input id
      });

from表单验证
form标签必须指定 layui-form 有些表单验证失败的，可以把layui-form 放在外层div中
指定 lay-filter 用于 form.on 监听事件获取表单元素
验证：为input指定 required lay-verify="required " 自带验证
自定义验证 lay-verify=“entRequired”


<script type="text/html" id="OpenSxCon">
    <div style="text-align:center">
       <form style="margin:20px;" class="layui-form" lay-filter="detail_form" action="">
        
       <div class="layui-form-item " hidden>
           <label class="layui-form-label">企业action</label>
           <div class="layui-input-block">
               <input type="text" id="actionType" disabled  name="actionType"   placeholder=""
               autocomplete="off" class="layui-input lay-btn-disabled">
           </div>
       </div>
       <div class="layui-row">
           <div class="layui-col-xs12 layui-col-md12">
               <div class="layui-form-item">
                   <label class="layui-form-label required"  >企业名称</label>
                   <div class="layui-input-block">
                       <!-- <input type="text" id="EnterpriseName"  required lay-verify="EnterpriseNameRequired"  name="EnterpriseName"  placeholder=""
                              autocomplete="off" class="layui-input"> -->
                              <input type="text" name="EnterpriseName" id="EnterpriseName" class="layui-input" style="position:absolute;z-index:2;
                              width:100%;" lay-verify="EnterpriseNameRequired" value="" οnkeyup="search()" autocomplete="off">
                              <select type="text" id="hc_select" lay-filter="hc_select" autocomplete="off" 
                              placeholder=""  lay-verify="EnterpriseNameRequired" class="layui-select" lay-search></select>
                             
                   </div>
               </div>
              
           </div>
       </div>
       <div class="layui-row">
        
        <div class="layui-col-xs6 layui-col-md4">
            <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label required">所在省</label>
                <div class="layui-input-block">
                    <select lay-filter="selProvinceChange"  lay-search  required lay-verify="selProvinceRequired"  id="selProvince" name="Province">
                        <option value="">--请选择--</option>
                    </select>
                </div>
            </div>
        </div>
        </div>
   
        <div class="layui-col-xs6 layui-col-md4" >
            <div class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label required">所在市</label>
                    <div class="layui-input-block">
                        <select lay-filter="selCityChange"  lay-search  required lay-verify="selCityRequired" id="selCity" name="City">
                            <option value="">--请选择--</option>
                        </select>
                    </div>
                </div>
          </div>
        </div>
        <div class="layui-col-xs6 layui-col-md4" >
            <div class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label required">所在区县</label>
                    <div class="layui-input-block">   
                        <!--  -->
                        <select  id="selCountry" required  lay-search  lay-verify="selCountyRequired" name="County"><option value="">--请选择--</option></select>
                    </div>
                 </div>
              </div>
        </div>
    </div> 
           <div class="layui-row">
           <div class="layui-col-xs6 layui-col-md6" >
               <div class="layui-form-item">
                   <label class="layui-form-label required">补贴资金(万元)</label>
                   <div class="layui-input-block">
                       <input type="text" id="SupportFunds" required lay-verify="SupportFundsRequired"  name="SupportFunds"  placeholder=""
                           autocomplete="off" class="layui-input">
                   </div>
              </div>
           </div>
           <div class=" layui-col-xs6 layui-col-md6" >
            <div class="layui-form">
                        <div class="layui-form-item">
                                <label class="layui-form-label required">补贴资金状态</label>
                                <div class="layui-input-block">
                                    <select   id="FundStatus" required lay-verify="FundStatusRequired" name="FundStatus">
                                        <option value="">--请选择--</option>
                                        <option value="未发放">未发放</option>
                                        <option value="已发放">已发放</option>
                                    </select>
                                </div>
                        </div>
            </div>
      </div>
       </div>
      
       <div class="layui-row" style="margin-top:40px;text-align: center;">
        <div class="layui-form-item ">
                <button id="btnSure" type="button" class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="submitBtn">确 定</button>
                <button type="button" id="btnCancel" onclick="CloseWindows();"  class="layui-btn layui-btn-primary">取 消</button>
                <!-- <button type="button" id="btnCancel"  class="layui-layer-close layui-layer-close1 layui-btn layui-btn-primary">取 消</button> -->
          
        </div>
    </div>
   
     </form>
   </div>
   </script>

自定义验证

 formLay.verify({
 //input 中lay-verify指定的 值 EnterpriseNameRequired
          EnterpriseNameRequired: () => {
          //此处用于自定义验证
            if ($("#actionType").val() != "detail") {
              var EnterpriseName = $("#EnterpriseName").val();
              if (EnterpriseName == "") {
                return "请输入企业名称";
              }
            }
          },
)}

from 表单提交

必须指定 lay-submint lay-filter=“自定义事件名称” 如 submitBtn

//页面定义button
  <button id="btnSure" type="button" class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="submitBtn">确 定</button>

监听点击事件

formLay.on("submit(submitBtn)", function (data) {
   var dataSend = formLay.val("detail_form");//获取表单数据
   //  //form表单赋值 detail_formCompany 为表单绑定的filter值
                            formLay.val("detail_formCompany", JSON.parse(JSON.stringify(data))); 
})

用 var dataSend = formLay.val(“detail_form”);//获取表单数据 detail_form 为form中指定的lay-filter

select 渲染值改变事件

 <label class="layui-form-label required">所在省</label>
                <div class="layui-input-block">
                    <select lay-filter="selProvinceChange"  lay-search   required lay-verify="selProvinceRequired"  id="selProvince" name="Province">
                        <option value="">--请选择--</option>
                    </select>
                </div>

 $("#selProvince").append(
                    "<option>" + aProvince[i] + "</option>"
                  );
                  $("#selProvince").val(data.Province);//赋值
         form.render()    //必须写这个用于渲染select

值改变事件 select标签绑定事件 lay-filter =“selProvinceChange”

//监听事件
formLay.on("select(selProvinceChange)", function (data) {
          var message = $("select[name=Province").val();
          $("#selCity").children().not(":eq(0)").remove();
          $("#selCountry").children().not(":eq(0)").remove();
          iNum1 = $("select[name=Province").children("option:selected").index();
          var aaCity = aCity[iNum1 - 1];
          $("#selCity").empty();
          $("#selCity").append("<option value=''>--请选择--</option>");
          for (var j = 0; j < aaCity.length; j++) {
            $("#selCity").append("<option>" + aaCity[j] + "</option>");
          }
          formLay.render("select");
        }),