{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. Spring Cloud Config 分布式配置管理 5.3

    Spring Cloud Config简介 在传统的单体式应用系统中,我们通常会将配置文件和代码放在一起,但随着系统越来越大,需要实现的功能越来越多时,我们又不得不将系统升级为分布式系统,同时也会将系 ...

  2. 组件文档系统-mdx-react-docz

    推荐指数:

  3. 【Leetcode_easy】1046. Last Stone Weight

    problem 1046. Last Stone Weight 参考 1. Leetcode_easy_1046. Last Stone Weight; 完

  4. Python3之调试

    程序能一次写完并正常运行的概率很小,基本不超过1%.总会有各种各样的bug需要修正.有的bug很简单,看看错误信息就知道,有的bug很复杂,我们需要知道出错时,哪些变量的值是正确的,哪些变量的值是错误 ...

  5. Flutter 一些常用第三方库、插件

    网络请求 http ^0.12.0+2 https://pub.dev/packages/http https://github.com/dart-lang/http 该软件包包含一组高级函数和类,可 ...

  6. Ubuntu18.04 安装MySQL

    安装 #命令1 sudo apt-get update #命令2 sudo apt-get install mysql-server 初始化 sudo mysql_secure_installatio ...

  7. python 之 数据库（多表查询之连接查询、子查询、pymysql模块的使用）

    10.10 多表连接查询 10.101 内连接 把两张表有对应关系的记录连接成一张虚拟表 select * from emp,dep: #连接两张表的笛卡尔积 select * from emp,de ...

  8. AVR单片机教程——烧写hex文件

    每一次build项目,编译器都会生成多个文件,其中有一个就是hex文件.之前在IDE中配置的external tools,就是把这个hex文件烧写到单片机中去的. 然而,有些时候你想运行别人的程序,但 ...

  9. C++语言类之间的关系

    在c++中通过类定义对象,而类与类之间也有着复杂的关系,所以题外话,我能理解到c++的编写者可能就想通过计算机语言去模拟世界万物之间的关系,这篇帖子主要从横向和纵向去讨论类之间关系 而在一个类中想要使 ...

  10. 案例（1）-- OOM异常

    问题描述: 1.系统在执行某个操作时,必现OOM异常. 问题的定位: 1.排查代码,未发现问题. 2.在虚拟机启动时,添加参数:-XX:+HeapDumpOnOutOfMemoryError(当发生o ...