搞懂 Layui这个ui框架的表单

一、什么是Layui？

简单的来说就是一个ui框架，如今在各大框架横行的情况下，layui还有必要去学习吗？看你个人，想学就学，不想学就拉倒。

让我们来重温一下layui的官网，其实总的来说现在的话，我们只需要搞懂layui的弹窗，表单，以及表格，其实就已经够用了，像按钮的话其实就是一个button加上 layui-btn这种class属性。

1.1 Layui 表单

首先提及到layui的一系列方法事件时
我们得先要知道layui同样也是需要挂载的，像我们在Vue里去使用一个插件时，我们需要在vue的main.js中去用Vue.use(‘插件’)去挂载（具体为什么挂载，可以去查一查），那么我们如何使用layui去挂载我们所需要使用的组件呢？
首先来看

可能单纯的一张图，看不出来什么
在我们引入了layui的cdn节点之后，我们即可以在script标签中使用layui.use这个方法去挂载组件
那么use的第一个参数，其实也就是一个数组，那么这个数组，我个人理解其实就是将组件与layui关联起来，可以填写多个
如[‘element’, ‘form’, ‘table’, ‘jquery’, ‘layer’]，用到什么些什么就好了，那么我们的表单是哪一个呢？其实也就是form，
那么第二个参数是什么呢？
其实第二个参数你就可以理解成是一个回调函数，当组件与layui关联完成之后，去调用的一个函数，在这个函数里我们可以进行，对组件对layui的一系列操作。
其实再有的话就是使用var 进行变量声明，将关联好的组件，放置到一个变量上面，那么当这个变量声明完成之后就可以在页面上使用了。

回到正题
那么layui我们如何去使用呢？
总的来说就和bootstrap差不多，标签里面套class类名就好了
先看我个人写的一个小案例

  <form class="user-form layui-form">
      <div class="layui-form-item">
        <label class="layui-form-label">username</label>
        <div class="layui-input-block">
          <input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入用户名" class="layui-input" />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">password</label>
        <div class="layui-input-block">
          <input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入密码" class="layui-input" />
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          
          <button id="addDepartment" class="layui-btn" lay-filter="formVerify" lay-submit >添加</button>
        </div>
      </div>
    </form>

这样其实页面上就会有一个小表单了，当然我们要在页面下方声明一下from，而且这只是简单的文本框，那么我们如果需要到像select，radio，checkbox复选框呢？
来我们来看官网是如何说的。

如果我们想用到上面我们提到的表单属性的话我们必须要按照他的方式来，form.render()来进行渲染。

其实再有的话就是表单提交
那么我们如果说表单提交的话我们应该如何去监听？
lay-filter=""和lay-submit
首先我们得在提交的按钮上面绑定一个lay-filter和lay-submit这两个属性，然后我们去根据这一个属性去监听，不是说给这个按钮绑定一个单击事件就好了，我们得前去根据layui特定的form.on方法去监听，因为这样我们才能触发表单的验证事件，只需要知道我们得需要用layui的方法去触发这个事件就好了。

    form.on('submit(formVerify)', function (data) {
    // layer这个变量其实是弹窗，弹窗的话我们后续去做讲解
      layer.msg('操作成功', {
        icon: 1,
        time: 2000,
      })
      // 
    })

这个时候，其实表单事件已经触发了，并且表单的验证事件也同样已经触发了
那么这个时候我们来说一下表单的验证事件，那么什么是表单的验证事件呢？
我们来看 其实也就是给input添加一个 lay-verify=""这个属性，这个属性有很多值，我们同样也可以使用二进制的方式去自定义，当然在这里的话我们就直接使用官网自带的就好了

lay-verify：是表单验证的关键字
有以下值供选择：

required (必填项)
phone（手机号）
email（邮箱）
url（网址）
number（数字）
date（日期）
identity(身份证)
自定义值
同时支持多条规则的验证：
格式：lay-verify=”验证A|验证B”
如：lay-verify=”required|phone|number”

其实表单的话差不多就是这样，再有的话我们下一节就直接去讲弹窗了。