<del id="kmqwi"><b id="kmqwi"></b></del>
      <track id="kmqwi"><del id="kmqwi"></del></track>
    1. <table id="kmqwi"></table>
      <acronym id="kmqwi"><strong id="kmqwi"></strong></acronym>
    2. 
      
      <p id="kmqwi"><strong id="kmqwi"></strong></p>
    3. 表單模塊文檔 - layui.form

      我們通常會在最常用的模塊上耗費更多的精力,用盡可能簡單的方式詮釋 layui 所帶來的便捷性。顯而易見,form 是我們非常看重的一塊。于是它試圖用一貫極簡的姿態,去捕獲你對它的深深青睞。寄托在原始表單元素上的屬性設定,及其全自動的初始渲染,和基于事件驅動的接口書寫方式,會讓你覺得,傳統模式下的組件調用形式,也可以是那樣的優雅、簡單。然而文字的陳述始終是蒼白的,所以用行動慢慢感受 layui.form 給你的項目帶來的效率提升吧。

      模塊加載名稱:form

      layui 針對各種表單元素做了較為全面的UI支持,你無需去書寫那些 UI 結構,你只需要寫 HTML 原始的 input、select、textarea 這些基本的標簽即可。我們在 UI 上的渲染只要求一點,你必須給表單體系所在的父元素加上class="layui-form",一切的工作都會在你加載完form模塊后,自動完成。如下是一個最基本的例子:

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>layui.form小例子</title>
      <link rel="stylesheet" href="layui.css" media="all">
      </head>
      <body>
      <form class="layui-form"> <!-- 提示:如果你不想用form,你可以換成div等任何一個普通元素 -->
        <div class="layui-form-item">
          <label class="layui-form-label">輸入框</label>
          <div class="layui-input-block">
            <input type="text" name="" placeholder="請輸入" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">下拉選擇框</label>
          <div class="layui-input-block">
            <select name="interest" lay-filter="aihao">
              <option value="0">寫作</option>
              <option value="1">閱讀</option>
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">復選框</label>
          <div class="layui-input-block">
            <input type="checkbox" name="like[write]" title="寫作">
            <input type="checkbox" name="like[read]" title="閱讀">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">開關關</label>
          <div class="layui-input-block">
            <input type="checkbox" lay-skin="switch">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">開關開</label>
          <div class="layui-input-block">
            <input type="checkbox" checked lay-skin="switch">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">單選框</label>
          <div class="layui-input-block">
            <input type="radio" name="sex" value="0" title="男">
            <input type="radio" name="sex" value="1" title="女" checked>
          </div>
        </div>
        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">請填寫描述</label>
          <div class="layui-input-block">
            <textarea placeholder="請輸入內容" class="layui-textarea"></textarea>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
        <!-- 更多表單結構排版請移步文檔左側【頁面元素-表單】一項閱覽 -->
      </form>
      <script src="layui.js"></script>
      <script>
      layui.use('form', function(){
        var form = layui.form;
        
        //各種基于事件的操作,下面會有進一步介紹
      });
      </script>
      </body>
      </html>
            

      正如你上述看到的,你必須放入 layui 所規范的元素結構,form 模塊才會對其進行重置渲染。值得注意的是,在具體的每一塊表單元素中,你仍是像往日一樣寫 input 等標簽即可。另外,我們對我們所規范的結構進行了響應式的支持,而針對一些不同的表單排版,比如行內表單,你也只需要設定我們所定義好的 class 即可。關于這一塊,你可以移步頁面元素的表單文檔中做詳細了解。而事實上你的大部分焦點可能也在那里,但當前這篇文檔主要還是介紹 form 整體模塊。

      有些時候,你的有些表單元素可能是動態插入的。這時 form 模塊 的自動化渲染是會對其失效的。雖然我們沒有雙向綁定機制(因為我們叫經典模塊化框架,偷笑.gif) 但沒有關系,你只需要執行 form.render(type, filter); 方法即可。

      第一個參數:type,為表單的 type 類型,可選。默認對全部類型的表單進行一次更新。可局部刷新的 type 如下表:

      參數(type)值 描述
      select 刷新select選擇框渲染
      checkbox 刷新checkbox復選框(含開關)渲染
      radio 刷新radio單選框框渲染
      form.render(); //更新全部
      form.render('select'); //刷新select選擇框渲染
      //……
            

      第二個參數:filter,為 class="layui-form" 所在元素的 lay-filter="" 的值。你可以借助該參數,對表單完成局部更新。

      【HTML】
      <div class="layui-form" lay-filter="test1">
        …
      </div>
       
      <div class="layui-form" lay-filter="test2">
        …
      </div>
            
      【JavaScript】
      form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器內的全部表單狀態
      form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器內的全部 select 狀態
      //……
            

      事實上在使用表單時,你的一半精力可能會在元素本身上。所以我們把一些基礎屬性的配置恰恰安放在了標簽本身上。如:

      <input type="text" lay-verify="email">
      <input type="checkbox" checked lay-skin="switch" lay-filter="encrypt" title="是否加密">
      <button lay-submit>提交</button>
            

      上述的lay-verifylay-skinlay-filterlay-submit神馬的都是我們所說的預設的元素屬性,他們可以使得一些交互操作交由form模塊內部、或者你來借助form提供的JS接口精確控制。目前我們可支持的屬性如下表所示:

      屬性名 屬性值 說明
      title 任意字符 設定元素名稱,一般用于checkbox、radio框
      lay-skin switch(開關風格) primary(原始風格) 定義元素的風格,目前只對 checkbox 元素有效,可將其轉變為開關樣式
      lay-ignore 任意字符或不設值 是否忽略元素美化處理。設置后,將不會對該元素進行初始化渲染,即保留系統風格
      lay-filter 任意字符 事件過濾器,主要用于事件的精確匹配,跟選擇器是比較類似的。其實它并不私屬于form模塊,它在 layui 的很多基于事件的接口中都會應用到。
      lay-verify required(必填項)
      phone(手機號)
      email(郵箱)
      url(網址)
      number(數字)
      date(日期)
      identity(身份證)
      自定義值
      同時支持多條規則的驗證,格式:lay-verify="驗證A|驗證B"
      如:lay-verify="required|phone|number"

      另外,除了我們內置的校驗規則,你還可以給他設定任意的值,比如lay-verify="pass",那么你就需要借助form.verify()方法對pass進行一個校驗規則的定義。詳見表單驗證
      lay-verType tips(吸附層)
      alert(對話框)
      msg(默認)
      用于定義異常提示層模式。
      lay-reqText 任意字符 用于自定義必填項(即設定了 lay-verify="required" 的表單)的提示文本
      注意:該功能為 layui 2.5.0 新增
      lay-submit 無需填寫值 綁定觸發提交的元素,如button

      語法:form.on('event(過濾器值)', callback);

      form模塊在 layui 事件機制中注冊了專屬事件,所以當你使用layui.onevent()自定義模塊事件時,請勿占用form名。form支持的事件如下:

      event 描述
      select 監聽select下拉選擇事件
      checkbox 監聽checkbox復選框勾選事件
      switch 監聽checkbox復選框開關事件
      radio 監聽radio單選框事件
      submit 監聽表單提交事件

      默認情況下,事件所監聽的是全部的form模塊元素,但如果你只想監聽某一個元素,使用事件過濾器即可。
      如:<select lay-filter="test"></select>

      form.on('select(test)', function(data){
        console.log(data);
      });
            

      下拉選擇框被選中時觸發,回調函數返回一個object參數,攜帶兩個成員:

      form.on('select(filter)', function(data){
        console.log(data.elem); //得到select原始DOM對象
        console.log(data.value); //得到被選中的值
        console.log(data.othis); //得到美化后的DOM對象
      });      
            

      請注意:如果你想監聽所有的select,去掉過濾器(filter)即可。下面將不再對此進行備注。

      復選框點擊勾選時觸發,回調函數返回一個object參數,攜帶兩個成員:

      form.on('checkbox(filter)', function(data){
        console.log(data.elem); //得到checkbox原始DOM對象
        console.log(data.elem.checked); //是否被選中,true或者false
        console.log(data.value); //復選框value值,也可以通過data.elem.value得到
        console.log(data.othis); //得到美化后的DOM對象
      });        
            

      開關被點擊時觸發,回調函數返回一個object參數,攜帶兩個成員:

      form.on('switch(filter)', function(data){
        console.log(data.elem); //得到checkbox原始DOM對象
        console.log(data.elem.checked); //開關是否開啟,true或者false
        console.log(data.value); //開關value值,也可以通過data.elem.value得到
        console.log(data.othis); //得到美化后的DOM對象
      });  
            

      radio單選框被點擊時觸發,回調函數返回一個object參數,攜帶兩個成員:

      form.on('radio(filter)', function(data){
        console.log(data.elem); //得到radio原始DOM對象
        console.log(data.value); //被點擊的radio的value值
      });  
            

      按鈕點擊或者表單被執行提交時觸發,其中回調函數只有在驗證全部通過后才會進入,回調返回三個成員:

      form.on('submit(*)', function(data){
        console.log(data.elem) //被執行事件的元素DOM對象,一般為button對象
        console.log(data.form) //被執行提交的form對象,一般在存在form標簽時才會返回
        console.log(data.field) //當前容器的全部表單字段,名值對形式:{name: value}
        return false; //阻止表單跳轉。如果需要表單跳轉,去掉這段即可。
      });
            

      再次溫馨提示:上述的submit(*)中的 * 號為事件過濾器的值,是在你綁定執行提交的元素時設定的,如:

      <button lay-submit lay-filter="*">提交</button>     
            

      你可以把*號換成任意的值,如:lay-filter="go",但監聽事件時也要改成 form.on('submit(go)', callback);

      語法:form.val('filter', object);

      用于給指定表單集合的元素賦值和取值。如果 object 參數存在,則為賦值;如果 object 參數不存在,則為取值。
      注:其中「取值」功能為 layui 2.5.5 開始新增

      //給表單賦值
      form.val("formTest", { //formTest 即 class="layui-form" 所在元素屬性 lay-filter="" 對應的值
        "username": "賢心" // "name": "value"
        ,"sex": "女"
        ,"auth": 3
        ,"check[write]": true
        ,"open": false
        ,"desc": "我愛layui"
      });
       
      //獲取表單區域所有值
      var data1 = form.val("formTest");
            

      第二個參數中的鍵值是表單元素對應的 namevalue

      我們對表單的驗證進行了非常巧妙的支持,大多數時候你只需要在表單元素上加上 lay-verify="" 屬性值即可。如:

      <input type="text" lay-verify="email"> 
       
      還同時支持多條規則的驗證,如下:
      <input type="text" lay-verify="required|phone|number">
            

      上述對輸入框定義了一個郵箱規則的校驗,它會在 form 模塊內部完成。目前我們內置的校驗支持見上文的:預設元素屬性

      除了內置的校驗規則外,你還可以自定義驗證規則,通常對于比較復雜的校驗,這是非常有必要的。

      form.verify({
        username: function(value, item){ //value:表單的值、item:表單的DOM對象
          if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
            return '用戶名不能有特殊字符';
          }
          if(/(^\_)|(\__)|(\_+$)/.test(value)){
            return '用戶名首尾不能出現下劃線\'_\'';
          }
          if(/^\d+\d+\d$/.test(value)){
            return '用戶名不能全為數字';
          }
        }
        
        //我們既支持上述函數式的方式,也支持下述數組的形式
        //數組的兩個值分別代表:[正則匹配、匹配不符時的提示文字]
        ,pass: [
          /^[\S]{6,12}$/
          ,'密碼必須6到12位,且不能出現空格'
        ] 
      });      
            

      當你自定義了類似上面的驗證規則后,你只需要把 key 賦值給輸入框的 lay-verify 屬性即可:

      <input type="text" lay-verify="username" placeholder="請輸入用戶名">
      <input type="password" lay-verify="pass" placeholder="請輸入密碼">
            

      針對一些不同的表單排版,比如行內表單、整體表單風格、按鈕風格等等,請移步到文檔導航左側【頁面元素】下的指定分類即可。

      layui - 用心與你溝通

      亚洲图色