Learning form in layui (example)-Layui Tutorial-php.cn

Home

Web Front-end

Layui Tutorial

Learning form in layui (example)

尚

Nov 29, 2019 pm 01:34 PM

layuiform

Learning form in layui (example)

1. Introduction to layui:

layui is a front-end UI framework written using its own module specifications. It is an open source modular front-end UI framework that is different from Those UI frameworks based on the underlying MVVM.

Advantages: native development mode, modularity, and strong compatibility

layui can be used as a quick development solution for the PC web-side backend system and front-end interface

2. Directory structure

Learning form in layui (example)

3. Introduction methods and form cases

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>layui_learn_one</title>
    <link rel="stylesheet" href="./layui-2.3.0/css/layui.css"> 
    <script type="text/javascript" src="./layui-2.3.0/layui.js"></script>
    <script>
    layui.use([&#39;form&#39;, &#39;layedit&#39;, &#39;laydate&#39;], function(){
      var form = layui.form
      ,layer = layui.layer
      ,layedit = layui.layedit
      ,laydate = layui.laydate;

      //日期
      laydate.render({
        elem: &#39;#date&#39;
      });
      laydate.render({
        elem: &#39;#date1&#39;
      });

      //创建一个编辑器
      var editIndex = layedit.build(&#39;LAY_demo_editor&#39;);

      //自定义验证规则
      form.verify({
        title: function(value){
          if(value.length < 5){
            return &#39;标题至少得5个字符啊&#39;;
          }
        }
        ,pass: [/(.+){6,12}$/, &#39;密码必须6到12位&#39;]
        ,content: function(value){
          layedit.sync(editIndex);
        }
      });

      //监听指定开关
      form.on(&#39;switch(switchTest)&#39;, function(data){
        layer.msg(&#39;开关checked：&#39;+ (this.checked ? &#39;true&#39; : &#39;false&#39;), {
          offset: &#39;6px&#39;
        });
        layer.tips(&#39;温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF&#39;, data.othis)
      });

      //监听提交
      form.on(&#39;submit(demo1)&#39;, function(data){
        layer.alert(JSON.stringify(data.field), {
          title: &#39;最终的提交信息&#39;
        })
        return false;
      });


    });
    </script>
</head>
<body>
    <form action="">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
      <legend>表单集合演示</legend>
        </fieldset>
      <div>
        <label>单行输入框</label>
        <div>
          <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" style="width:200px;">
        </div>
      </div>
      <div>
        <label>验证必填项</label>
        <div>
          <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off">
        </div>
      </div>

      <div>
        <div>
          <label>验证手机</label>
          <div>
            <input type="tel" name="phone" lay-verify="phone" autocomplete="off">
          </div>
        </div>
        <div>
          <label>验证邮箱</label>
          <div>
            <input type="text" name="email" lay-verify="email" autocomplete="off">
          </div>
        </div>
      </div>

      <div>
        <div>
          <label>多规则验证</label>
          <div>
            <input type="text" name="number" lay-verify="required|number" autocomplete="off">
          </div>
        </div>
        <div>
          <label>验证日期</label>
          <div>
            <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off">
          </div>
        </div>
        <div>
          <label>验证链接</label>
          <div>
            <input type="tel" name="url" lay-verify="url" autocomplete="off">
          </div>
        </div>
      </div>

      <div>
        <label>验证身份证</label>
        <div>
          <input type="text" name="identity" lay-verify="identity" placeholder="" autocomplete="off">
        </div>
      </div>
      <div>
        <label>自定义验证</label>
        <div>
          <input type="password" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off">
        </div>
        <div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
      </div>

      <div>
        <div>
          <label>范围</label>
          <div style="width: 100px;">
            <input type="text" name="price_min" placeholder="￥" autocomplete="off">
          </div>
          <div>-</div>
          <div style="width: 100px;">
            <input type="text" name="price_max" placeholder="￥" autocomplete="off">
          </div>
        </div>
      </div>

      <div>
        <label>单行选择框</label>
        <div>
          <select name="interest" lay-filter="aihao">
            <option value=""></option>
            <option value="0">写作</option>
            <option value="1" selected="">阅读</option>
            <option value="2">游戏</option>
            <option value="3">音乐</option>
            <option value="4">旅行</option>
          </select>
        </div>
      </div>


      <div>
        <div>
          <label>分组选择框</label>
          <div>
            <select name="quiz">
              <option value="">请选择问题</option>
              <optgroup label="城市记忆">
                <option value="你工作的第一个城市">你工作的第一个城市</option>
              </optgroup>
              <optgroup label="学生时代">
                <option value="你的工号">你的工号</option>
                <option value="你最喜欢的老师">你最喜欢的老师</option>
              </optgroup>
            </select>
          </div>
        </div>
        <div>
          <label>搜索选择框</label>
          <div>
            <select name="modules" lay-verify="required" lay-search="">
              <option value="">直接选择或搜索选择</option>
              <option value="1">layer</option>
              <option value="2">form</option>
              <option value="3">layim</option>
              <option value="4">element</option>
              <option value="5">laytpl</option>
              <option value="6">upload</option>
              <option value="7">laydate</option>
              <option value="8">laypage</option>
              <option value="9">flow</option>
              <option value="10">util</option>
              <option value="11">code</option>
              <option value="12">tree</option>
              <option value="13">layedit</option>
              <option value="14">nav</option>
              <option value="15">tab</option>
              <option value="16">table</option>
              <option value="17">select</option>
              <option value="18">checkbox</option>
              <option value="19">switch</option>
              <option value="20">radio</option>
            </select>
          </div>
        </div>
      </div>

      <div>
        <label>联动选择框</label>
        <div>
          <select name="quiz1">
            <option value="">请选择省</option>
            <option value="浙江" selected="">浙江省</option>
            <option value="你的工号">江西省</option>
            <option value="你最喜欢的老师">福建省</option>
          </select>
        </div>
        <div>
          <select name="quiz2">
            <option value="">请选择市</option>
            <option value="杭州">杭州</option>
            <option value="宁波" disabled="">宁波</option>
            <option value="温州">温州</option>
            <option value="温州">台州</option>
            <option value="温州">绍兴</option>
          </select>
        </div>
        <div>
          <select name="quiz3">
            <option value="">请选择县/区</option>
            <option value="西湖区">西湖区</option>
            <option value="余杭区">余杭区</option>
            <option value="拱墅区">临安市</option>
          </select>
        </div>
        <div class="layui-form-mid layui-word-aux">此处只是演示联动排版，并未做联动交互</div>
      </div>

      <div>
        <label>复选框</label>
        <div>
          <input type="checkbox" name="like[write]" title="写作">
          <input type="checkbox" name="like[read]" title="阅读" checked="">
          <input type="checkbox" name="like[game]" title="游戏">
        </div>
      </div>

      <div pane="">
        <label>原始复选框</label>
        <div>
          <input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
          <input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
          <input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="">
        </div>
      </div>

      <div>
        <label>开关-默认关</label>
        <div>
          <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
        </div>
      </div>
      <div>
        <label>开关-默认开</label>
        <div>
          <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
        </div>
      </div>
      <div>
        <label>单选框</label>
        <div>
          <input type="radio" name="sex" value="男" title="男" checked="">
          <input type="radio" name="sex" value="女" title="女">
          <input type="radio" name="sex" value="禁" title="禁用" disabled="">
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label>普通文本域</label>
        <div>
          <textarea placeholder="请输入内容"></textarea>
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label>编辑器</label>
        <div>
          <textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="LAY_demo_editor"></textarea>
        </div>
      </div>
      <div>
        <div>
          <button lay-submit="" lay-filter="demo1">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
</body>
</html>

For more layui knowledge, please pay attention to the layui usage tutorial column.

The above is the detailed content of Learning form in layui (example). For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:CSDN. If there is any infringement, please contact admin@php.cn delete

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks agoByDDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks agoByDDD

Where to find the Crane Control Keycard in Atomfall

3 weeks agoByDDD

Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation

1 months agoByDDD

Roblox: Dead Rails - How To Complete Every Challenge

3 weeks agoByDDD

Hot Tools

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),