Layui表单-form(重点).md

01-16 19411阅读 0评论

温馨提示:

文章最后更新时间2021年01月16日,若内容或图片失效,请留言反馈!

layui中,layui不仅仅为表单提供了一套内置的样式.也为表单提供了一系列的操作的方法.

样式:

表示该容器使用表单的样式.该样式,是表单中具体样式的基础.

|--- : 表示表单中的具体项

|--- : 表示表单项中label标签,文本说明

|--- : 表示一个input容器,block块元素 占一行

|--- : 表示一个input容器,inline 行内块.不占一行

|--- : 表示一个input标签

|--- : 表示不独占一行,一般用于一项中存在多个form元素,使用其包裹

特殊样式:

在layui中,对form表单中checkbox,radio,select的样式,做了特殊处理.使用javascript,根据原生input中的属性,进行渲染,重新生成了响应效果的DIV元素.并且生成的DIV元素与原生input标签存在属性值的绑定关系.

复选框:

属性名说明
title显示的文字
lay-skin风格:默认 primary 原始复选框效果 switch: 开关形式
checked选中
value复选框值
lay-text="文本1|文本2"开关效果显示的文字

单选按钮:

属性名说明
title显示的文字
checked选中
value复选框值

下拉框:

属性名说明
selected选中
lay-search开启搜索效果

form表单特殊属性:

属性名属性值说明
title任意字符设定元素名称,一般用于checkbox、radio框
lay-skinswitch(开关风格) primary(原始风格)定义元素的风格,目前只对 checkbox 元素有效,可将其转变为开关样式
lay-ignore任意字符或不设值是否忽略元素美化处理。设置后,将不会对该元素进行初始化渲染,即保留系统风格
lay-filter任意字符事件过滤器,主要用于事件的精确匹配,跟选择器是比较类似的。其实它并不私属于form模块,它在 layui 的很多基于事件的接口中都会应用到。
lay-verifyemail(邮箱)url(网址) number(数字) date(日期) identity(身份证) 自定义值同时支持多条规则的验证,格式:lay-verify="验证A|验证B" 如:lay-verify="required|phone|number" 另外,除了我们内置的校验规则,你还可以给他设定任意的值,比如lay-verify="pass",那么你就需要借助form.verify()方法对pass进行一个校验规则的定义。详见表单验证
lay-verTypetips(吸附层) alert(对话框) msg(默认)用于定义异常提示层模式。
lay-reqText任意字符用于自定义必填项(即设定了 lay-verify="required" 的表单)的提示文本 注意:该功能为 layui 2.5.0 新增
lay-submit无需填写值绑定触发提交的元素,如button

示例:

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body class="page_speeder_1455828636">

  <form class="layui-form" action="">
      <div class="layui-form-item">
          <label class="layui-form-label">显示文字</label>
          <!-- input 容器 这种是独占一行 -->
          <div class="layui-input-block">
              <input class="layui-input" placeholder="独占一行" lay-verify="required|phone" lay-verType="msg" lay-reqText="独占一行不能为空" />
          </div>
      </div>
      <div class="layui-form-item">
          <div class="layui-inline">
              <label class="layui-form-label">显示文字1</label>
              <!-- input 容器 这种是独占一行 -->
              <div class="layui-input-inline">
                  <input class="layui-input" lay-verify="number|username" lay-verType="tips"/>
              </div>
          </div>
          <div class="layui-inline">
              <label class="layui-form-label">显示文字</label>
              <!-- input 容器 这种是独占一行 -->
              <div class="layui-input-inline">
                  <input class="layui-input" placeholder="显示的文字" />
              </div>
          </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="写作" lay-skin="primary">
              <!-- 开关风格 -->
              <input type=checkbox name=like[read] lay-text="文本1|文本2" lay-skin="switch" 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=radio name=sex value="nan" title="男">
              <input type=radio name=sex value="nv" title="女" checked>
              <input type=radio name=sex value="" title="中性" disabled>
          </div>
      </div>
      <div class="layui-form-item">
          <label class="layui-form-label">下拉框:</label>
          <div class="layui-input-block">
              <select name=city lay-verify="" lay-search>
                  <option value="010">layer</option>
                  <option value="021">form</option>
                  <option value="0571" selected>layim</option>
              </select>  
          </div>
      </div>
      <button class="layui-btn" lay-submit >提交</button>      
  </form>
  <!-- 引入layui中JS -->
  <script type=text/javascript src=layui/layui.js></script>
  <script type=text/javascript>
      //初始化layui模块
      layui.use([ 'element', 'jquery', 'form' ], function() {
          var element = layui.element;
          var $ = layui.jquery;
          var from = layui.form;
          //自定义校验规则
          from.verify({
              username:function(value, item){
                  console.log(value);
                  if(value.length < 10){
                        return '用户名不能少于10位';
                  }
              }
          });
      });
  </script>
</body>
</html>
事件:
事件类型描述
select监听select下拉选择事件
checkbox监听checkbox复选框勾选事件
switch监听checkbox复选框开关事件
radio监听radio单选框事件
submit监听表单提交事件
方法:
方法名称解释
render()重新渲染
val()获取或者为表单赋值

示例:

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body >
  <form action="http://www.baidu.com" lay-filter="myForm">
    <div >
      <label >显示文字</label>
      <!-- input 容器 这种是独占一行 -->
      <div >
        <input  name=input1 value="13111111111" placeholder="独占一行" lay-verify="required|phone" lay-verType="msg" lay-reqText="独占一行不能为空" />
      </div>
    </div>
    <div >
      <div >
        <label >显示文字1</label>
        <!-- input 容器 这种是独占一行 -->
        <div >
          <input name=input2 value="13111111111" lay-verify="number|username" lay-verType="tips"/>
        </div>
      </div>
      <div >
        <label >显示文字</label>
        <!-- input 容器 这种是独占一行 -->
        <div >
          <input name=input3 placeholder="显示的文字" />
        </div>
      </div>
    </div>
    <div >
      <label >复选框:</label>
      <div >
        <!-- 原始风格 -->
        <input type=checkbox lay-filter="formCheckbox" value="写作" name=like[write] title="写作" lay-skin="primary">
        <!-- 开关风格 -->
        <input type=checkbox lay-filter="formCheckbox" value="文本" name=like[text] lay-text="文本1|文本2" lay-skin="switch" checked>
        <!-- 默认风格 -->
        <input type=checkbox lay-filter="formCheckbox" value="发呆" name=like[dai] title="发呆">
      </div>
    </div>
    <div >
      <label >单选按钮:</label>
      <div >
        <input type=radio lay-filter="formRadio" name=sex value="男" title="男">
        <input type=radio lay-filter="formRadio" name=sex value="女" title="女" checked>
        <input type=radio lay-filter="formRadio" name=sex value="" title="中性" disabled>
      </div>
    </div>
    <div >
      <label >下拉框:</label>
      <div >
        <select id="city" name=city lay-search  lay-filter="formSelect">
          <option value="010">layer</option>
          <option value="021">form</option>
          <option value="0571" selected>layim</option>
        </select> 
      </div>
    </div>
    <button  lay-submit lay-filter="submitBtn">提交</button>    
  </form>
  <br>
  <button  id="initForm">为表单初始化值</button>
  <br>
  <button id="addDom">为下拉框新增option</button>
  <!-- 引入layui中JS -->
  <script type=text/javascript src=layui/layui.js></script>
  <script type=text/javascript>
    //初始化layui模块
    layui.use([ 'element', 'jquery', 'form' ], function() {
      var element = layui.element;
      var $ = layui.jquery;
      var form = layui.form;
      //自定义校验规则
      form.verify({
        username:function(value, item){
          if(value.length < 10){
             return '用户名不能少于10位';
          }
        }
      });
    //==========监听下拉框选择事件===========  
    //监听下拉框选择事件
    form.on("select(formSelect)",function(data){
      console.log(data);
      console.log(data.elem); //得到select原始DOM对象
      console.log(data.value); //得到被选中的值
      console.log(data.othis); //得到美化后的DOM对象
    });
    //==========复选框选择事件:只支持原生风格 默认风格===========
    form.on("checkbox(formCheckbox)",function(data){// checkbox(lay-filter): 每个checkbox上的lay-filter 并且只支持 原生风格和默认风格
       console.log(data.elem); //得到checkbox原始DOM对象
       console.log(data.elem.checked); //是否被选中,true或者false
       console.log(data.value); //复选框value值,也可以通过data.elem.value得到
       console.log(data.othis); //得到美化后的DOM对象
    });
    //===========复选框选择事件:开关风格===========
    form.on("switch(formCheckbox)",function(data){// checkbox(lay-filter): 每个checkbox上的lay-filter 并且只支持 开关风格
      console.log(data.elem); //得到checkbox原始DOM对象
      console.log(data.elem.checked); //开关是否开启,true或者false
      console.log(data.value); //开关value值,也可以通过data.elem.value得到
      console.log(data.othis); //得到美化后的DOM对象
    });
    //==========单选按钮:==========
    form.on("radio(formRadio)",function(data){// checkbox(lay-filter): 每个checkbox上的lay-filter 并且只支持 开关风格
       console.log(data.elem); //得到radio原始DOM对象
       console.log(data.value); //被点击的radio的value值
    });
    //========监听表单提交=========
    form.on('submit(submitBtn)',function(data){// submit(lay-filter值):lay-filter值是提交按钮上面
      console.log(data);
      console.log(data.field);
      //阻止表单提交 因为表单提交后 会刷新页面.一般使用ajax提交表单数据,然后阻止表单提交.只有使用layui的表单提交才能触发数据校验.
      //使用layui的表单提交事件,在事件中使用ajax提交数据,然后阻止表单提交,这样既可以使用layui的数据校验,也可以使用ajax的异步提交数据
      return false;
    });
    //==========方法: 为表单初始化值:===========
    $("#initForm").click(function(){
      var data = {
          'input1':'12345678911',
          'input2':'12345678911',
          'input3':'12345678911',
          'like[write]': true,
          'like[text]':true,
          'like[dai]':true,
          'sex':'女',
          'city':'021'
      };
      form.val("myForm",data);//此时lay-filter值,是form表单上的lay-filter值
      //得到form的值
      console.log(form.val("myForm"));
    });
    //===========方法: 重新渲染表单============
    $("#addDom").click(function(){
      $("#city").append("<option value='option' >新增option</option>");
      //重新渲染表单
      form.render();
    });
  });
  </script>
</body>
</html>


文章版权声明:除非注明,否则均为阿灿博客原创文章,转载或复制请以超链接形式并注明出处。

发表评论取消回复

表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (暂无评论,19411人围观)

还没有评论,来说两句吧...

取消
支付宝二维码
支付宝二维码
微信二维码