layuiinput詳解

layuiinput是一款基於 layui 框架，提供了文本輸入框組件及相關的常用功能及樣式的插件。本文將從使用、功能、代碼分析三個方面進行講解。

一、使用

使用layuiinput非常簡單。在引入layui的css和js文件後，只需要引入layuiinput的css和js文件即可。

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<link rel="stylesheet" href="layuiinput/layuiinput.css">
<script src="layuiinput/layuiinput.js"></script>

然後在需要使用的位置，使用如下代碼即可：

<div class="layui-input"><input type="text" name="title" required lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input"></div>

其中，class=”layui-input” 是指調用layui框架的input樣式。class=”layui-input”是指調用layuiinput的樣式。

二、功能

1. 基本功能

layuiinput提供了文本輸入框的基本功能，包括文本輸入、錯誤提示、必填項等基本功能。

下面是一個示例，其中“名稱”和“描述”是必填項，如果不填寫則會有錯誤提示。

<div class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label">名稱</label>
    <div class="layui-input-block">
      <input type="text" name="title" required  lay-verify="required" placeholder="請輸入名稱" autocomplete="off" class="layui-input">
    </div>
  </div>

   <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">描述</label>
    <div class="layui-input-block">
      <textarea name="desc" required lay-verify="required" placeholder="請輸入描述" class="layui-textarea"></textarea>
    </div>
  </div>
</div>

<script>
layui.use('form', function(){
  var form = layui.form;
  //監聽提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script>

2. 多種類型

除了基本的文本類型，layuiinput還支持多種類型，包括密碼框、多行文本框、選擇框、複選框、單選框和文件上傳框等。

下面是一個示例，包括了密碼框、多行文本框、選擇框、複選框、單選框和文件上傳框等。

<div class="layui-input">
  <input type="password" name="password" required lay-verify="required" placeholder="請輸入密碼" autocomplete="off" class="layui-input">
</div>
<div class="layui-textarea">
  <textarea name="desc" required lay-verify="required" placeholder="請輸入描述" class="layui-textarea"></textarea>
</div>
<div class="layui-input">
  <select name="interest" required lay-verify="required">
    <option value="">請選擇</option>
    <option value="game">遊戲</option>
    <option value="book">讀書</option>
    <option value="movie">電影</option>
  </select>
</div>
<div class="layui-input">
  <input type="checkbox" name="like1[write]" title="寫作" checked>
  <input type="checkbox" name="like1[read]" title="閱讀">
  <input type="checkbox" name="like1[dai]" title="發獃">
</div>
<div class="layui-input">
  <input type="radio" name="sex" value="男" title="男" checked>
  <input type="radio" name="sex" value="女" title="女">
</div>
<div class="layui-input">
  <button type="button" class="layui-btn" id="test1"><i class="layui-icon"></i>上傳圖片</button>
</div>

<script>
//選擇框
layui.use('form', function(){
  var form = layui.form;
  form.render();
});

//文件上傳
layui.use('upload', function(){
  var upload = layui.upload;
  var uploadInst = upload.render({
    elem: '#test1',
    url: '/upload/',
    done: function(res){
      console.log(res)
    },
    error: function(){
      //請求異常回調
    }
  });
});
</script>

3. 外顯效果

layuiinput提供了多種樣式，包括常規樣式、行內樣式、列表樣式等，外顯效果非常美觀大氣。

下面是一個示例，展示了layuiinput不同樣式的煥然一新的外觀。

<div class="layui-input-inline">
  <input type="text" name="phone" required lay-verify="phone" placeholder="請輸入手機" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline">
  <input type="text" name="city" required lay-verify="required" placeholder="請輸入城市" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline">
  <input type="text" name="email" required lay-verify="email" placeholder="請輸入郵箱" autocomplete="off" class="layui-input">
</div>

<div class="layui-form-item">
  <label class="layui-form-label">省份</label>
  <div class="layui-input-block">
    <input type="radio" name="province" value="0" title="廣東" checked>
    <input type="radio" name="province" value="1" title="廣西">
    <input type="radio" name="province" value="2" title="湖南">
  </div>
</div>

<div class="layui-form-item">
  <label class="layui-form-label">個人描述</label>
  <div class="layui-input-block">
    <textarea name="desc" placeholder="請輸入內容" class="layui-textarea"></textarea>
  </div>
</div>

<script>
layui.use('form', function(){
  var form = layui.form;
  form.render();
});
</script>

三、代碼分析

layuiinput提供了多種代碼方案，代碼非常簡潔易懂。下面是常規示例的js代碼。

<script>
layui.use('form', function(){
  var form = layui.form;
  //監聽提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script>

需要注意的是，引入layuiinput組件後，還需要引入layui組件，因為layuiinput是基於layui構建的。同時，需要根據實際情況修改代碼中的class標籤和id標籤。

小結

本文對layuiinput做了詳細的介紹，包括使用、功能和代碼分析等方面。在實際使用中，只需要引入layuiinput的css和js文件，並按照示例代碼進行即可。