精华内容
下载资源
问答
  • div class="layui-form-item" > <label class="layui-form-label">路线</label> <div class="layui-input-block" id="last"> <div class="layui-input-inline"> {empty name="$ways...

    在这里插入图片描述
    html部分

    <div class="layui-form-item" >
        <label class="layui-form-label">路线</label>
        <div class="layui-input-block" id="last">
            <div class="layui-input-inline">
                {empty name="$ways"}
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input type="text" name="ways[]" placeholder="请输入"
                            autocomplete="off" class="form-control" style="width: 200%;">
                    </div>
                    <div class="layui-input-block" style="margin-left: 480px">
                        <button id="add" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                            <i class="layui-icon">&#xe654;</i>
                        </button>
                    </div>
                </div>
                {else /}
                <!-- 循环列出数据 -->
                {volist name="ways" id="vo"}
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input type="text" name="ways[]" lay-verify="required" value="{$vo.name}"
                            class="form-control" style="width: 200%;">
                    </div>
                    <div class="layui-input-block" style="margin-left: 480px">
                        <button type="button"
                            class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i
                                class="layui-icon">&#xe67e;</i></button>
                    </div>
                </div>
                {/volist}
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input type="text" name="ways[]" placeholder="请输入"
                            autocomplete="off" class="form-control" style="width: 200%;">
                    </div>
                    <div class="layui-input-block" style="margin-left: 480px">
                        <button id="add" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                            <i class="layui-icon">&#xe654;</i>
                        </button>
                    </div>
                </div>
                {/empty}
            </div>
    
        </div>
    </div>
    

    js部分

    layui.use(['element', 'jquery', 'layer', 'form', 'laydate'], function () {
        var form = layui.form
            , element = layui.element
            , laydate = layui.laydate
            , $ = layui.$;
    
        //动态添加input输入框
        $("#add").click(function () {
            var str = '<div class="layui-form-item">' +
                '<div class="layui-input-inline">' +
                '<input type="text" name="ways[]" lay-verify="required"' +
                'class="form-control" style="width: 200%;">' +
                '</div>' +
                '<div class="layui-input-block" style="margin-left: 480px">' +
                '<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon">&#xe67e;</i></button>' +
                '</div>' +
                '</div>';
    
            $("#last").append(str);
            x++;
        });
    
        //删除动态添加的input输入框
        $("body").on('click', ".removeclass", function () {
            //元素移除前校验是否被引用
            var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
            var parentEle = $(this).parent().parent();
            parentEle.remove();
        });
    })
    

    layui form表单 动态添加、删除input框,以及数据回显
    在form表单中,动态增加input框,最多添加5个,删除校验

    html代码

    <form class="layui-form" th:action="@{/basicInfo/update/project}" method="post">
            <div class="layui-form-item" id="last">
                 <label class="layui-form-label">开发项目核准名</label>
                 <div class="layui-input-inline">
                     <input type="text" id="projectApprovalName" name="projectApprovalName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input input-double-width">
                     <input class="layui-input" type="hidden" id="id" name="id"  th:value="${estateInfo.id}">
                 </div>
                 <div class="layui-input-inline" style="margin-left: 180px">
                     <button id="add" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                         <i class="layui-icon">&#xe654;</i>
                     </button>
                 </div>
                 <span class="layui-word-aux">备注:最多添加5个项目核准名,每个长度为2-15个字符</span>
             </div>
    </form>
    

    js代码

    <script type="text/javascript" th:inline="javascript">
        layui.use([ 'layer', 'upload'], function () {
            var $ = layui.jquery;
            var layer = layui.layer; //加载layer模块
            var upload = layui.upload;  //加载upload模块
            var id = $("#id").val();
            var basePath=[[${#httpServletRequest.getContextPath()}]];
    
        //动态添加input输入框
        var max = 5;
        var x = 1;
        $("#add").click(function(){
            if(x<max){
                var str =  '<div class="layui-form-item">'+
                    '<label class="layui-form-label"></label>'+
                    '<div class="layui-input-inline">'+
                        '<input type="text" name="projectApprovalName" class="layui-input input-double-width">'+
                    '</div>'+
                    '<div class="layui-input-inline" style="margin-left: 180px">'+
                        '<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon">&#xe67e;</i></button>'+
                    '</div>'+
                '</div>';
    
                $("#last").append(str);
                x++;
            }else {
                layer.msg("最多添加5条信息",{icon:2});
            }
        });
    
        //删除动态添加的input输入框
        $("body").on('click',".removeclass",function(){
            if(x>1){
                //元素移除前校验是否被引用
                var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
                var parentEle = $(this).parent().parent();
                $.ajax({
                    url:basePath+'/basicInfo/findByApprovalNameAndEstateId',
                    type:"get",
                    data:{'id':id,'projectApprovalName':approvalName},
                    dataType:"json",
                    success:function(res){
                        if(res.code!==200){
                            layer.msg('项目核准名 '+approvalName+' 已被引用,禁止删除', {icon: 2, title:'提示'});
                        }else {
                            //移除父元素
                            parentEle.remove();
                            x--;
                        }
                    }
                });
            }
        });
        //动态回显input值
        var approvalNameStr = [[${estateInfo.projectApprovalName}]];
        var approvalNameArr = approvalNameStr.split(',');
        $.each(approvalNameArr,function (i,json) {
    
            if(i===0){
                $("#projectApprovalName").val(json);
            }
    
            if(i>0){
                var str =  '<div class="layui-form-item">'+
                    '<label class="layui-form-label"></label>'+
                    '<div class="layui-input-inline">'+
                    '<input type="text" name="projectApprovalName" value="'+json+'" class="layui-input input-double-width">'+
                    '</div>'+
                    '<div class="layui-input-inline" style="margin-left: 180px">'+
                    '<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon">&#xe67e;</i></button>'+
                    '</div>'+
                    '</div>';
                $("#last").append(str);
            }
    
            x=i+1;
        });
      })
    </script>
    

    ----------------------------------------------------------------------自己的项目--------------------------------------------------------------------------
    在这里插入图片描述

    <div class="layui-form-item" >
                     <label class="layui-form-label" style="width: 90px;">服务器ip端口</label>
                        <div class="layui-input-block" id="last2">
                        <div class="layui-input-inline">
                            <div class="layui-form-item">
                                <div class="layui-input-inline" style="width: 151px;!important;" >
                                    <input type="text" name="ways[]"
                                           class="layui-input"  required lay-verify="required"  autocomplete="off" class="form-control" style="width: 200%;">
                                </div>
                                <div class="layui-input-block" style="margin-left: 310px">
                                    <button id="add2" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                                        <i class="layui-icon">&#xe654;</i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    
    //layui 表单动态添加、删除input框  ---start
            //动态添加input输入框
            var x = 1;
            $("#add2").click(function () {
                var str = '<div class="layui-form-item"  style="margin-left: 10px;"   > ' +
                    '<div class="layui-input-inline" style="width: 151px;!important;">' +
                    '<input type="text" name="ways[]" lay-verify="required"' +
                    'class="form-control layui-input" style="width: 200%;"   >' +
                    '</div>' +
                    '<div class="layui-input-block" style="margin-left: 310px">' +
                    '<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon">&#xe67e;</i></button>' +
                    '</div>' +
                    '</div>';
    
                $("#last2").append(str);
                x++;
            });
    
            //删除动态添加的input输入框
            $("body").on('click', ".removeclass", function () {
                //元素移除前校验是否被引用
                var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
                var parentEle = $(this).parent().parent();
                parentEle.remove();
            });
           //---------end----------
    
    展开全文
  • layui 表单标签的校验

    万次阅读 多人点赞 2017-10-19 09:42:04
    layui表单元素的校验只需在元素上加入lay-verify,layui提供了以下值。required(必填项) phone(手机号) email(邮箱) url(网址) number(数字) date(日期) identity(身份证) 自定义值同时支持多条规则的...

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程

    layui表单元素的校验只需在元素上加入lay-verify,layui提供了以下值。

    required(必填项)
    phone(手机号)
    email(邮箱)
    url(网址)
    number(数字)
    date(日期)
    identity(身份证)
    自定义值
    

    同时支持多条规则的验证,格式:lay-verify=“验证A|验证B”
    如:lay-verify=“required|phone|number”

    另外,除了我们内置的校验规则,你还可以给他设定任意的值,比如lay-verify=“pass”,那么你就需要借助form.verify()方法对pass进行一个校验规则的定义

    示例:

    <div class="layui-form-item">
            <label for="" class="layui-form-label">请输入邮件</label>
            <div class="layui-input-block">
                <input type="text" placeholder="请输入邮件" lay-verify="email" class="layui-input">
            </div>
        </div>
    

    填入非法邮件时,点击提交会有笑脸图标提示,挺棒的!

    这里写图片描述

    自定义校验:

    form.verify({
      username: function(value, item){ //value:表单的值、item:表单的DOM对象
        if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
          return '用户名不能有特殊字符';
        }
        if(/(^\_)|(\__)|(\_+$)/.test(value)){
          return '用户名首尾不能出现下划线\'_\'';
        }
        if(/^\d+\d+\d$/.test(value)){
          return '用户名不能全为数字';
        }
      }
      
      //我们既支持上述函数式的方式,也支持下述数组的形式
      //数组的两个值分别代表:[正则匹配、匹配不符时的提示文字]
      ,pass: [
        /^[\S]{6,12}$/
        ,'密码必须6到12位,且不能出现空格'
      ] 
    });
    

    当你自定义了类似上面的验证规则后,你只需要把key赋值给输入框的 lay-verify 属性即可:

    <input type="text" lay-verify="username" placeholder="请输入用户名">
    <input type="password" lay-verify="pass" placeholder="请输入密码">
    

    ###专业墙纸贴纸厨房用具装饰出售,本人网店经营
    博客对你有用记得访问下哦,增加下访问量,如有需要可以下单购买哦_。https://item.taobao.com/item.htm?id=569617707364

    展开全文
  • layui 表单验证案例

    万次阅读 2016-10-26 11:49:08
    文本框,手机,邮箱,textarea等格式的验证 HTML代码: 反馈主题

    js如何判断字符是中文,英文,数字还是字符

    //验证是否是中文
     
    var pattern = new RegExp("[\u4E00-\u9FA5]+");
     
    var str = "中文字符"
     
    if(pattern.test(str)){
     
        alert('该字符串是中文');
     
    }
     
    //验证是否是英文
     
    var pattern2 = new RegExp("[A-Za-z]+");
     
    var str2 = "abcdefsgaaweg"
     
    if(pattern2.test(str2)){
     
        alert('该字符串是英文');
     
    }
     
    //验证是否是数字
     
    var pattern3 = new RegExp("[0-9]+");
     
    var str3 = "234234"
     
    if(pattern3.test(str3)){
     
        alert('该字符串是数字');
     
    }

    所有layui验证:举例只能是英文

    	form.verify({
    		env: function(value, item){ //value:表单的值、item:表单的DOM对象
    			if(!new RegExp("^[A-Za-z]+$").test(value)){
    				return '必须全部为英文';
    			}
    			if(value.length < 5){
    				return '至少5位';
    			}
    		}
    	});

     

    文本框,手机,邮箱,textarea等格式的验证

    1、验证必填项:lay-verify=”required”
    2、数字验证:lay-verify=”int”
    3、验证用户名:lay-verify=”username”
    4、验证手机号:lay-verify=”phone”
    5、验证邮箱:lay-verify=”email”
    6、验证身份证:lay-verify=”identity”
    7、验证日期:lay-verify=”date”
    8、验证链接:lay-verify=”url”
    9、自定义密码验证:lay-verify=”pass”

     

    <script src="layui/layui.js"></script>

    <script src="layui/lay/dest/layui.all.js"></script> 

    <link rel="stylesheet" href="layui/css/layui.css"> 

    HTML代码:

    <form class="layui-form" action="">
                              <div class="layui-form-item">
                                <label class="layui-form-label">反馈主题</label>
                                <div class="layui-input-block">
                                  <input name="title" class="layui-input" type="text" placeholder="请输入标题" autocomplete="off" lay-verify="title">
                                </div>
                              </div>
                              <div class="layui-form-item">
                                <label class="layui-form-label">姓名</label>
                                <div class="layui-input-block">
                                  <input name="fname" class="layui-input" type="text" placeholder="请输入姓名" autocomplete="off" lay-verify="fname">
                                </div>
                              </div>
                              <div class="layui-form-item">
                                <label class="layui-form-label">手机</label>
                                <div class="layui-input-block">
                                  <input name="phone" class="layui-input" type="tel" autocomplete="off" placeholder="请输入手机" lay-verify="phone">
                                </div>
                              </div>
                              <div class="layui-form-item">
                                <label class="layui-form-label">邮箱</label>
                                <div class="layui-input-block">
                                  <input name="email" class="layui-input" type="text" autocomplete="off" placeholder="请输入邮箱" lay-verify="email">
                                </div>
                              </div>
                              <div class="layui-form-item">
                                <label class="layui-form-label">单选框</label>
                                <div class="layui-input-block">
                                  <input name="sex" title="男" type="radio" checked="" value="男">
                                  <input name="sex" title="女" type="radio" value="女">
                                  <input name="sex" title="保密" type="radio" value="密">
                                </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" placeholder="请输入内容">请输入内容</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="contact" id="LAY_demo_editor" lay-verify="contact"></textarea>
                                </div>
                              </div>
                              <div class="layui-form-item">
                                <div class="layui-input-block">
                                  <button class="layui-btn" lay-filter="demo2" lay-submit="">跳转式提交</button>
                                  <button class="layui-btn" lay-filter="demo1" lay-submit="">立即提交</button>
                                  <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                                </div>
                              </div>
                            </form>

     

    js验证代码

     

    <script>
    layui.use(['form', 'layedit', 'laydate'], function(){
      var form = layui.form()
      ,layer = layui.layer
      ,layedit = layui.layedit
      ,laydate = layui.laydate;
     
      //自定义验证规则
      form.verify({
    		title: function(value){
    		  if(value.length < 5){
    			return '标题至少得5个字符啊';
    		  }
    		}, fname: function(value){
    		  if(value.length < 4){
    			return '请输入至少4位的用户名';
    		  }
    		}, contact: function(value){
    		  if(value.length < 4){
    			return '内容请输入至少4个字符';
    		  }
    		}
    		,phone: [/^1[3|4|5|7|8]\d{9}$/, '手机必须11位,只能是数字!']
    		,email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/, '邮箱格式不对']
      });
      
      //创建一个编辑器
      layedit.build('LAY_demo_editor');
      
      //监听提交
      form.on('submit(demo1)', function(data){
        layer.alert(JSON.stringify(data.field), {
          title: '最终的提交信息'
        })
        return false;
      });
      
     
    });
    </script>

     

    其它验证可以看看这里

    http://www.51xuediannao.com/js/jquery/jquery_validate/

     

    展开全文
  • 文章目录[隐藏] Layui select 下拉框动态渲染 Layui select 下拉框动态渲染这几天在做一个功能时需要用到 select 动态渲染。但是我在渲染的时候始终不对,第一次始终不能渲染,而且随着 select 个数增多渲染次数也要...
    文章目录[隐藏]

    Layui select 下拉框动态渲染

    这几天在做一个功能时需要用到 select 动态渲染。但是我在渲染的时候始终不对,第一次始终不能渲染,而且随着 select 个数增多渲染次数也要增加,然后回来剥离一个 demo 结果又可以,白白浪费好久时间,最终发现还是有几处不对。


    直接上代码把:

    html 代码:

    <button type=”button” class=”layui-btn” id=”btn1″>点我</button>

    <form action=”” class=”layui-form” id=”formItem” style=”display: none;padding: 20px 10px;”>
    <div class=”layui-form-item”>
    <label class=”layui-form-label”>选择框</label>
    <div class=”layui-input-block”>
    <select name=”city” lay-verify=”required” id=”select11″>
    </select>
    </div>
    </div>
    <div class=”layui-form-item”>
    <label class=”layui-form-label”>选择框</label>
    <div class=”layui-input-block”>
    <select name=”city” lay-verify=”required” id=”select22″>
    </select>
    </div>
    </div>
    </form>


    JS 代码

    var form = layui.form;
    var $ = layui.jquery;
    $(‘#btn1’).click(function() {

    layer.open({
    type: 1,
    shade: false,
    title: “提示”, //不显示标题
    content: $(‘#formItem’),
    area: [‘50%’, ‘500px’],
    success: function(layero, index) {
    let _html = ”
    for (let i = 0; i < 5; i++) {
    _html += ‘<option>’ + i + ‘</option>’;
    }
    console.log($(layero).find(‘#select11’))
    $(layero).find(‘#select11’).append(_html);
    $(layero).find(‘#select22’).append(_html);
    console.log(layero, index);
    form.render(‘select’);
    },
    cancel: function() {
    layer.msg(‘捕获就是从页面已经存在的元素上,包裹 layer 的结构’, {
    time: 5000,
    icon: 6
    });
    }
    });
    });

    注意事项:

    1. 添加的时候时,for 循环之添加 html 元素,不做渲染,

    2. 查找元素方法: $(layero).find(‘#select11’)是这样的,针对的是 layer 弹窗中

    3. 最后记得渲染,form.render(‘select’);

    4. 如果不显示记得添加这句话:var form = layui.form;

    好了,不想吐槽 wordpress 这个编辑器了,太不好编辑了。那位好心人有啥好的编辑器推荐个噻。

    展开全文
  • layui表单中下拉列表动态添加option 总结:防止读取乏味,这里先总结一下“layui中给表单下拉列表动态添加option一定要在添加完成之后刷新表单(form.render())否则将死活不显示” 今天用layui做下拉列表动态添加...
  • Layui表单

    千次阅读 2019-06-09 17:50:42
    在一个容器中设定 class=“layui-form” 来标识一个表单元素块,通过规范好的HTML结构及CSS类,来组装成各式各样的表单元素,并通过内置的 form模块 来完成各种交互。 layui 针对各种表单元素做了较为全面的UI支持,...
  • layui 表单 验证整数.rar
  • layui表单验证

    2018-11-01 20:48:35
    个人总结的有关layui中对页面的一些验证,省份正,邮箱等
  • 今天小编就为大家分享一篇layui 表单标签的校验方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui表单居中

    万次阅读 2019-11-28 15:53:14
    在外层用text-aglin:center无法居中的问题 <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">选择框</label&g...
  • layui表单赋值与表单取值

    千次阅读 2020-01-06 18:12:56
    //表单赋值 layui.$('#LAY-component-form-setval').on('click', function(){ form.val('example', { "username": "贤心" // "name": "value" ,"password": "123456" ,"interest": 1 ,"lik...
  • layui表单提交

    千次阅读 2019-07-04 15:43:52
    layui标准的提交 <form class="layui-form" action=""> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-f...
  • layui表单布局

    千次阅读 2020-03-26 16:50:00
    layui-form 表单标签 layui-form-item 表单项,块级元素,一个表单项标签内可放多个输入框 layui-form-label 表单标签 layui-input-block 块级输入框 layui-input input输入框样式 layui-inline 外层行内 layui-...
  • layui 表单 关键字

    2019-04-02 15:59:31
    layui 表单 1.表单自带校验 lay-verify:是表单验证的关键字 有以下值供选择: required (必填项) phone(手机号) email(邮箱) url(网址) number(数字) date(日期) identity(身份证) 自定义值 同时支持多条...
  • Layui表单验证

    2021-05-16 11:02:51
    要想使用layui插件中form表单验证,我们首先需要加载初始化layui模块,因为这里用到form表单,所以要加载form模块。 var layer, layuiTable, form;//保存layui模块以便全局使用 $(function(){ //加载&&初始...
  • LayUI表单提交数据为空

    万次阅读 2018-03-27 09:55:20
    今天踩了个坑,就是使用layui表单提交时,提交的数据为空。 例如,layer.msg(JSON.stringify(data.field));这句代码执行后,页面显示为空对象。 &amp;lt;form class=&quot;layui-form&quot; action=&...
  • layui 表单元素

    千次阅读 2018-07-03 10:21:11
    在一个容器中设定class="layui-form"来标识一个表单元素块,并通过内置的form模块来完成各种渲染和交互。 依赖加载模块:form(请注意:如果不加载form模块,select、checkbox、radio等将无法显示,并且无法使用...
  • layui表单展示下拉框

    2020-12-15 10:53:52
    一、Layui表单展示时 显示的时数字 需要根据枚举类型展示出内容。 二、写下拉框时,展示出全部内容。 Layui表单 添加一个枚举类 ,获取需求的字段。 constant或者enums包下 public enum GoodsBrandStatusEnum { ...
  • layui 表单搜索

    2020-11-10 10:55:45
    form class="layui-form" lay-filter="title" id="title"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">球员位置:&l...
  • 今天在用Layui的时候,由于需要做三级联动菜单,当我用“Ajax实现三级联动下拉菜单省市区(PHP+JavaScript)原生代码”的时候,却发现:用了Layui这种前端框架,Layui表单动态加载select数据时,会导致点击select...
  • Layui表单的验证

    2019-12-02 17:07:09
    Layui表单的验证1.资源引入2.表单验证2.1关键字验证2.2自定义验证 1.资源引入 1.layui/css/layui.css 2.layui/layui.js <link rel="stylesheet" href="../layui/css/layui.css"> <script type="text/...
  • layui表单和文件上传

    千次阅读 2019-07-18 17:48:44
    layui表单和文件上传 近期用layui写了一个在表单中上传文件,因为这个表单和文件上传让我费劲了脑汁,因为第一次使用layui所以很多东西摸不清楚,后来查了资料才知道layui文件上传和from表单提交是异步的,分为两次...
  • layui表单提交没成功也会重新刷新表单,layui bug 在form.on最后添加return false;就可以了,如下图
  • layui 表单增强插件

    千次阅读 2018-06-07 17:45:34
    转自:... /** * Created by Doyle on 2018年3月6日17点09分 * layui表单增加插件 * * * */ layui.define(['jquery', 'form'], function(exports) { var $ = layui.jquery, ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,326
精华内容 3,730
关键字:

layui表单动态