layui总结(一) Layui-form

代码框架
表单样式
监听事件

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

layui总结(一) Layui-form

layui总结(一) Layui-form

- 监听事件

猜你喜欢