hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

layui中form表单进修(实例)_WEB前端开发

2019-11-30后端开发ki4网26°c
A+ A-

一、layui简介:

layui是一款采纳本身模块范例编写的前端 UI 框架,开源的模块化前 端 UI 框架,区分于那些基于 MVVM 底层的 UI 框架。

长处:原生开发形式、模块化、兼容性强

layui可作为 PC网页端背景体系与前台界面的速成开发计划

二、目次构造

三、引入体式格局与表单案例

<!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(['form', 'layedit', 'laydate'], function(){
      var form = layui.form
      ,layer = layui.layer
      ,layedit = layui.layedit
      ,laydate = layui.laydate;

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

      //建立一个编辑器
      var editIndex = layedit.build('LAY_demo_editor');

      //自定义考证划定规矩
      form.verify({
        title: function(value){
          if(value.length < 5){
            return '标题至少得5个字符啊';
          }
        }
        ,pass: [/(.+){6,12}$/, '暗码必需6到12位']
        ,content: function(value){
          layedit.sync(editIndex);
        }
      });

      //监听指定开关
      form.on('switch(switchTest)', function(data){
        layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), {
          offset: '6px'
        });
        layer.tips('温馨提醒:请注意开关状况的笔墨能够随便定义,而不仅仅是ON|OFF', data.othis)
      });

      //监听提交
      form.on('submit(demo1)', function(data){
        layer.alert(JSON.stringify(data.field), {
          title: '终究的提交信息'
        })
        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>

更多layui学问请关注layui运用教程栏目。

以上就是layui中form表单进修(实例)的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
layui中form表单进修(实例)_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>