layui总结(一) Layui-form

  • Post author:
  • Post category:其他




layui总结(一) Layui-form

  1. 代码框架
  2. 表单样式
  3. 监听事件


html框架:

<form class="layui-form" action="">
  <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">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-inline">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">辅助文字</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
      <select name="city" lay-verify="required">
        <option value=""></option>
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">深圳</option>
        <option value="4">杭州</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="阅读" checked>
      <input type="checkbox" name="like[dai]" title="发呆">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="switch" 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="" title="">
      <input type="radio" name="sex" value="" title="" checked>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      <textarea name="desc" 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="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
 
<script>
//Demo
layui.use('form', function(){
  var form = layui.form;
  
  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script>

在一个容器中设定 class=“layui-form” 来标识一个表单元素块,依赖加载模块:form (请注意:如果不加载form模块,select、checkbox、radio等将无法显示,并且无法使用form相关功能)

  • 输入框
    <input type="text" name="title" required lay-verify="required" 	placeholder="请输入标题" autocomplete="off" class="layui-input">    
          
  • 下拉选择框
    <select name="city" lay-verify="">
      <option value="">请选择一个城市</option>
      <option value="010">北京</option>
      <option value="021">上海</option>
      <option value="0571">杭州</option>
    </select>     

在这里插入图片描述
selected 来设定默认选中项

<select name="city" lay-verify="">
  <option value="010">北京</option>
  <option value="021" disabled>上海(禁用效果)</option>
  <option value="0571" selected>杭州</option>
</select>     
  • 复选框
默认风格:
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆"> 
<input type="checkbox" name="" title="禁用" disabled> 
 
原始风格:
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary"> 
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled> 

属性title可自定义文本(温馨提示:如果只想显示复选框,可以不用设置title) 属性checked可设定默认选中

属性lay-skin可设置复选框的风格 设置value=”1″可自定义值,否则选中时返回的就是默认的on

  • 单选框
    <input type="radio" name="sex" value="nan" title="">
    <input type="radio" name="sex" value="nv" title="" checked>
    <input type="radio" name="sex" value="" title="中性" disabled>
  • 预设元素属性
属性名 属性值 说明
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
如: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 触发radio单选框事件
radio 触发select下拉选择事件
submit 触发表单提交事件

-默认情况下,事件所触发的是全部的form模块元素,但如果你只想触发某一个元素,使用事件过滤器即可。

如:

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