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 样式。同时，也用于调用 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 提供了多种样式，包括常规样式、行内样式、列表样式等，外观美观大气。下面是一个示例，展示了不同样式的输入框：

<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 文件，并按照示例代码进行操作即可。

layuiinput详解