3,表單模組文件- layui-form

weixin_34075268發表於2019-01-14
UIORM

使用

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>

更新渲染

有些時候，你的有些表單元素可能是動態插入的。這時 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-verify、lay-skin、lay-filter、lay-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進行一個校驗規則的定義。[詳見表單驗證](https://www.layui.com/doc/modules/form.html#verify) |
| lay-verType | tips（吸附層）
alert（對話方塊）
msg（預設） | 用於定義異常提示層模式。注意：*該功能為 layui 2.2.0 新增* |
| lay-submit | 無需填寫值 | 繫結觸發提交的元素，如button |

事件監聽

語法： form.on('even(過濾器的值)',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);
});

監聽select選擇

下拉框被選中時候觸發，回撥函式返回一個object引數，攜帶2個成員

form.on('select(filter)', function(data){
  console.log(data.elem); //得到select原始DOM物件
  console.log(data.value); //得到被選中的值
  console.log(data.othis); //得到美化後的DOM物件
});    
  請注意：如果你想監聽所有的select，去掉過濾器(filter)即可。下面將不再對此進行備註。

監聽checkbox複選

核取方塊點選時候觸發，回撥函式返回一個object引數，攜帶2個成員

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物件
});

監聽switch開關

開關被點選時觸發，回撥函式返回一個object引數 ，攜帶2個成員

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單選

radio單選框被點選時觸發 ,回撥函式返回一個object引數，攜帶2個成員；

form.on('radio(filter)',function(data){
console.log(data.elem);  //獲得radio原始Dom 物件
console.log(data.value); //被點選的radio 的value 值
});

監聽submit提交

按鈕點選或者表單被執行提交時觸發，其中回撥函式只有在驗證全部通過後才會進入，回撥返回三個成員；

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(*)中的 * 號為事件過濾器的值，是在你繫結執行提交的元素時設定的，如：

表單初始賦值

語法： form.val('lay-filter的值',object);

//formTest 即 class="layui-form" 所在元素對應的 lay-filter="" 對應的值
form.val("formTest", {
  "username": "賢心" // "name": "value"
  ,"sex": "女"
  ,"auth": 3
  ,"check[write]": true
  ,"open": false
  ,"desc": "我愛layui"
})

第二個引數的鍵值是元素對應的 name 和 value。

表單驗證

我們對錶單進行了非常巧妙的支援，大多數的時候你只要在表單元素上加上 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="請輸入密碼">

相關文章