{include file="Public:inner_header" /}

<link rel="stylesheet" href="__STATIC__/add/layui/css/layui.css"  media="all">

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">

  <legend>表单集合演示</legend>

</fieldset>

<form class="layui-form" action="{:url('Achievementactivity/productadd')}">

  <div class="layui-form-item">

    <label class="layui-form-label">单行输入框</label>

    <div class="layui-input-block">

      <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" value="123456789012345" maxlength="15">

    </div>

  </div>

  <div class="layui-form-item">

    <label class="layui-form-label">验证必填项</label>

    <div class="layui-input-block">

      <input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">

    </div>

  </div>

  <div class="layui-form-item">

    <div class="layui-inline">

      <label class="layui-form-label">验证手机</label>

      <div class="layui-input-inline">

        <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input" value="15701563658">

      </div>

    </div>

    <div class="layui-inline">

      <label class="layui-form-label">验证邮箱</label>

      <div class="layui-input-inline">

        <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input" value="222@qq.com">

      </div>

    </div>

  </div>

  <div class="layui-form-item">

    <div class="layui-inline">

      <label class="layui-form-label">多规则验证</label>

      <div class="layui-input-inline">

        <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input" value="11">

      </div>

    </div>

    <div class="layui-inline">

      <label class="layui-form-label">验证日期</label>

      <div class="layui-input-inline">

        <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" value="2019-10-01">

      </div>

    </div>

     <div class="layui-inline">

      <label class="layui-form-label">结束日期</label>

      <div class="layui-input-inline">

        <input type="text" name="date1" id="date1" lay-verify="date1" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" value="2019-10-11">

      </div>

    </div>

   <!--  <div class="layui-inline">

      <label class="layui-form-label">验证链接</label>

      <div class="layui-input-inline">

        <input type="tel" name="url" lay-verify="url" autocomplete="off" class="layui-input">

      </div>

    </div> -->

  </div>

  <div class="layui-form-item">

    <label class="layui-form-label">验证身份证</label>

    <div class="layui-input-block">

      <input type="text" name="identity" lay-verify="identity" placeholder="" autocomplete="off" class="layui-input" value="513436200010063484">

    </div>

  </div>

  <div class="layui-form-item">

    <label class="layui-form-label">自定义验证</label>

    <div class="layui-input-inline">

      <input type="password" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">

    </div>

    <div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>

  </div>

<!--   <div class="layui-form-item">

    <div class="layui-inline">

      <label class="layui-form-label">范围</label>

      <div class="layui-input-inline" style="width: 100px;">

        <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">

      </div>

      <div class="layui-form-mid">-</div>

      <div class="layui-input-inline" style="width: 100px;">

        <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">

      </div>

    </div>

  </div> -->

  <div class="layui-form-item">

    <label class="layui-form-label">单行选择框</label>

    <div class="layui-input-block">

      <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 class="layui-form-item">

    <!-- <div class="layui-inline">

      <label class="layui-form-label">分组选择框</label>

      <div class="layui-input-inline">

        <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 class="layui-inline">

      <label class="layui-form-label">搜索选择框</label>

      <div class="layui-input-inline">

        <select name="modules" lay-verify="required" lay-search="">

          <option value="">直接选择或搜索选择</option>

          <option value="1" selected = "selected" >layer</option>

          <option value="2">form</option>

          <option value="3">layim</option>

          <option value="4">element</option>

          <option value="5">laytpl</option>

        </select>

      </div>

    </div>

  </div>

  <div class="layui-form-item">

    <label class="layui-form-label">联动选择框</label>

    <div class="layui-input-inline">

      <select name="quiz1">

        <option value="">请选择省</option>

        <option value="浙江" selected="">浙江省</option>

        <option value="你的工号">江西省</option>

        <option value="你最喜欢的老师">福建省</option>

      </select>

    </div>

    <div class="layui-input-inline">

      <select name="quiz2">

        <option value="">请选择市</option>

        <option value="杭州" >杭州</option>

        <option value="宁波" disabled="">宁波</option>

        <option value="温州" selected="">温州</option>

        <option value="温州">台州</option>

        <option value="温州">绍兴</option>

      </select>

    </div>

    <div class="layui-input-inline">

      <select name="quiz3">

        <option value="">请选择县/区</option>

        <option value="西湖区">西湖区</option>

        <option value="余杭区" selected="">余杭区</option>

        <option value="拱墅区">临安市</option>

      </select>

    </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">

      <input type="checkbox" name="like" title="写作" value="4">

      <input type="checkbox" name="like" title="阅读" checked="" value="5">

      <input type="checkbox" name="like" title="游戏" value="6">

    </div>

  </div>

  <div class="layui-form-item" pane="">

    <label class="layui-form-label">原始复选框</label>

    <div class="layui-input-block">

      <input type="checkbox" name="like1" lay-skin="primary" title="写作" checked="" value="1">

      <input type="checkbox" name="like1" lay-skin="primary" title="阅读" value="2">

      <input type="checkbox" name="like1" lay-skin="primary" title="游戏"  value="3">

    </div>

  </div>

  <div class="layui-form-item">

    <label class="layui-form-label">开关-默认关</label>

    <div class="layui-input-block">

      <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">

    </div>

  </div>

  <div class="layui-form-item">

    <label class="layui-form-label">开关-默认开</label>

    <div class="layui-input-block">

      <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">

    </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="男" checked="">

      <input type="radio" name="sex" value="女" title="女">

      <input type="radio" name="sex" value="禁" title="禁用" disabled="">

    </div>

  </div>

    <div class="layui-upload">

      <label class="layui-form-label">图片</label>

      <button type="button" class="layui-btn" id="test1">上传图片</button>

      <div class="layui-upload-list">

        <img class="layui-upload-img" id="demo1">

        <input type="hidden" name="hiddenimg1" id="hiddenimg1">

        <p id="demoText"></p>

      </div>

    </div>   

<div class="layui-upload">

  <label class="layui-form-label">图片</label>

  <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>

  <input type="hidden" name="hiddenimg2" id="hiddenimg2">

  <button type="button" class="layui-btn" id="test9">开始上传</button>

</div>

  <div class="layui-form-item layui-form-text">

    <label class="layui-form-label">普通文本域</label>

    <div class="layui-input-block">

      <textarea placeholder="请输入内容" class="layui-textarea">111</textarea>

    </div>

  </div>

  <div class="layui-form-item layui-form-text">

    <label class="layui-form-label">编辑器</label>

    <div class="layui-input-block">

      <textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="LAY_demo_editor"></textarea>

    </div>

  </div>

 <div class="layui-form-item layui-form-text">

    <label class="layui-form-label">百度编辑器</label>

    <div class="layui-input-block">

       <script id="udeditor" name="udcontent" lay-verify="udcontent" type="text/plain" style="width:1024px;height:500px;"></script>

    </div>

 </div>

  <div class="layui-form-item">

    <div class="layui-input-block">

      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo3">立即提交</button>

      <button type="reset" class="layui-btn layui-btn-primary">重置</button>

    </div>

  </div>

</form>

<script src="__STATIC__/js/jquery.min.js" charset="utf-8"></script>

<script src="__STATIC__/add/layui/layui.js" charset="utf-8"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<!-- 百度编辑器 -->

<script type="text/javascript" src="__STATIC__/add/lib/ueditor/1.4.3/ueditor.config.js"></script>

<script type="text/javascript" src="__STATIC__/add/lib/ueditor/1.4.3/ueditor.all.min.js"> </script>

<script type="text/javascript" src="__STATIC__/add/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>

<script type="text/javascript">

    //百度编辑器

    var ue = UE.getEditor('udeditor');

</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: [

      /^[\S]{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(demo3)', function(data){

       //获取checkbox[name='like1']的值

     var arr = new Array();

     $("input:checkbox[name='like1']:checked").each(function(i){

         arr[i] = $(this).val();

      });

    data.field.like1 = arr.join(",");//将数组合并成字符串

    //获取checkbox[name='like']的值

     var arr1 = new Array();

     $("input:checkbox[name='like']:checked").each(function(i){

         arr1[i] = $(this).val();

      });

    data.field.like = arr1.join(",");//将数组合并成字符串

    //获取百度编辑器中纯文本

    var udcontents = UE.getEditor('udeditor').getContentTxt();

    data.field.udcontent = udcontents;//合并

    var datafield = JSON.stringify(data.field);

    //表单提交后台处理

    $.post("{:url('Achievementactivity/productadd')}", {data:datafield}, function (res) {

         if (res.code == 1) {

            layer.msg('5555');

         } else {

            layer.msg('789');

         }

    }, 'json');

    return false;

  });

  //表单赋值

  layui.$('#LAY-component-form-setval').on('click', function(){

    form.val('example', {

      "username": "贤心" // "name": "value"

      ,"password": "123456"

      ,"interest": 1

      ,"like[write]": true //复选框选中状态

      ,"close": true //开关状态

      ,"sex": "女"

      ,"desc": "我爱 layui"

    });

  });

  //表单取值

  layui.$('#LAY-component-form-getval').on('click', function(){

    var data = form.val('example');

    alert(JSON.stringify(data));

  });

});

</script>

<script>

layui.use('upload', function(){

  var $ = layui.jquery

  ,upload = layui.upload;

  //普通图片上传

  var uploadInst = upload.render({

    elem: '#test1'

    ,url: '{:url(\'Achievementactivity/layuifileupload\')}'

    ,accept: 'images' //普通文件

    ,exts: 'jpg|png|gif|bmp|jpeg' //上传类型

    ,size: 2048 //限制文件大小，单位 KB

    ,before: function(obj){

      //预读本地文件示例，不支持ie8

      obj.preview(function(index, file, result){

        $('#demo1').attr('src', result); //图片链接（base64）

      });

    }

    ,done: function(res){

      $('#hiddenimg1').attr('value', res.data);

      //如果上传失败

      if(res.status == 0){

        return layer.msg('上传失败');

      }

      //上传成功

    }

    ,error: function(){

      //演示失败状态，并实现重传

      var demoText = $('#demoText');

      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');

      demoText.find('.demo-reload').on('click', function(){

        uploadInst.upload();

      });

    }

  });

   //选完文件后不自动上传

  upload.render({

    elem: '#test8'

    ,url: '{:url(\'Achievementactivity/layuifileupload\')}'

    ,auto: false

    //,multiple: true

    ,bindAction: '#test9'

    ,done: function(res){

        if(res.status == 1) {

            $('#hiddenimg2').attr('value', res.data);

            layer.msg('上传成功');

        }else{

            layer.msg('上传失败');

        }

      console.log(res);

    }

  });

});

</script>

</body>

</html>

layui 添加的更多相关文章

  1. layui 添加第三方插件

    关于 layui 添加第三方 JS 库 在写公司项目时,需要将第三方 JS 库整合到 layui 中,具体操作如下: 示例:https://www.jianshu.com/p/7a182e8bff10 ...

  2. layui 添加复选框checkbox后，无法正确显示及点击的方法

    layui 添加复选框checkbox后,无法正确显示方式,这个是由于html里的样式添加 layui-form后,没有加载 form插件 ,具体如下: <body style="ba ...

  3. layui当点击增加的时候,将form中的值获取的添加到table行中代码

    layui.use(['table','layer'],function(){ var $=layui.$, table=layui.table, layer=layui.layer; functio ...

  4. Layui表格之动态添加数据（表格多选解决方案）

    前言: Layui已经给出了多选记录的解决方案,是在每条数据的前面加上CheckBox,每次选择都有监听.效果是这样: 实现监听的代码如下,这是一种解决选择多条数据的方案: table.on('edi ...

  5. layui select动态添加option

    <form class="layui-form" action=""> <div class="layui-form-item pr ...

  6. layui js动态添加的面板不能折叠

    layui 动态添加dom后一般调用 layer.form.render()更新dom就可以了,但是我动态添加一个面板后form.render()就没有效果,要用layui.element.rende ...

  7. layui动态添加的元素click等事件触发不了的解决办法

    在页面加载完成时候 '.add_project' 元素是可以触发click时间的,当动态添加 '.add_project' 时候,新添加的元素却触发不了click事件,类似下面的写法: $(" ...

  8. layui table 表格上添加日期控件

    方法一: var tableInit = table.render({ elem: '#tbtxrz' , method: 'post' , data: jsonData , height: &quo ...

  9. layui页面操作，点击一个添加页面，跳转有确定，然后点击确定后将选择的几个数据返回前一个页面获取值，然后ajax请求后台

    custUserIndex.html [添加页面代码] <!DOCTYPE html> <html> <head> <meta charset="u ...

随机推荐

  1. 123457123457#0#----com.MC.3or1KongLongPT867----前拼后广--3or1恐龙PtGame-mc

    com.MC.3or1KongLongPT867----前拼后广--3or1恐龙PtGame-mc

  2. docker build时改变docker中的apt源

    # Ali apt-get source.list RUN mv /etc/apt/sources.list /etc/apt/sources.list.bak && \ echo & ...

  3. fiddler构造表单上传文件的请求

    Fiddler使用技巧:http://www.doc88.com/p-3307506524682.html Fiddler构造post请求,在请求header头里加上下面语句,提交的body才会被解析 ...

  4. 【VS开发】最小化到托盘 shell_notifyicon和NOTIFYICONDATA

    shell_notifyicon和NOTIFYICONDATA Shell_NotifyIcon函数,向任务栏的状态栏发送一个消息 函数原型 BOOL Shell_NotifIcon( DWORD d ...

  5. 【GStreamer开发】GStreamer基础教程05——集成GUI工具

    目标 本教程展示了如何在GStreamer集成一个GUI(比如:GTK+).最基本的原则是GStreamer处理多媒体的播放而GUI处理和用户的交互. 在这个教程里面,我们可以学到: 如何告诉GStr ...

  6. 推荐linux运维必备的几本书

    首先,<鸟哥的linux私房菜> 鸟哥 其次,<linux就该这么学> 刘瑞版 然后,<CentOS linux系统运维> 张祥琳版 最后,<CentOS运维 ...

  7. sshd_config参数说明

    SSHD_CONFIG(5) OpenBSD Programmer's Manual SSHD_CONFIG(5)名称 sshd_config - OpenSSH SSH 服务器守护进程配置文件大纲 ...

  8. TCP/IP学习笔记8--数据链路之基本概念

    "在你生命的最初30年中,你养成习惯:在你生命的最后30年中,你的习惯决定了你."---- Steve Jobs TCP/IP对于OSI参考模型的数据链路成及以下部分(物理层)没有 ...

  9. [转帖]crontab每小时运行一次

    crontab每小时运行一次     先给出crontab的语法格式 对于网上很多给出的每小时定时任务写法,可以说绝大多数都是错误的!比如对于下面的这种写法: 00 * * * * #每隔一小时执行一 ...

  10. 大数据架构（PB级）

    1.随着互联网快速发展,数据量的快速膨胀,我们日增3000多亿数据量,因此需要针对PB级存储.几百TB的增量数据处理架构设计 2.系统逻辑划分总图: 暂不便透露 3.系统架构图: 4.大数据计算引擎我 ...