tp5中layui form表单模块加载

发布时间:2023-11-22作者:小灵龙点击:160

html:

<div class="layui-form-item">
  <label class="layui-form-label"> 加油站:</label>
  <div class="layui-input-block">                         
        {volist name="jyzlist" id="vo"}
          <input type="radio" name="site_id" class="layui-input" value="{$vo.id}" title="{$vo.title}" lay-filter="jyzfilter">
          {/volist}                         
   </div>
 </div>
 <div class="layui-form-item">
     <label class="layui-form-label">加油员:</label>
    <div class="layui-input-block" id="jiayouyuan"></div>
  </div>

<div class="layui-form-item">
  <label class="layui-form-label"> 是否跨站:</label>
    <div class="layui-input-inline">
      <input type="checkbox" name="is_limit" lay-text="是|否" lay-skin="switch" class="layui-input" value="1" lay-filter="is_limit" {eq name='$login_set.login_phone' value="1" }checked{/eq}>
  </div>
</div>
    <div class="layui-form-item"  id="washer">
          <label class="layui-form-label"> 洗车机ID:</label>
           <div class="layui-input-block">
                 {volist name="wahsercar" id="vo"}
                     <input type="checkbox" name="limit_washer_id[]" class="layui-input" value="{$vo.id}" title="{$vo.name}">
                  {/volist}
              </div>
   </div>

<script>
    layui.use('form',function(){
        form=layui.form;
        //触发switch开关
        form.on('switch(is_limit)', function(data){
          console.log(data.elem); //得到checkbox原始DOM对象
          console.log(data.elem.checked); //开关是否开启,true或者false           
          console.log(data.field.is_limit); //只有开关为"是",该变量才能显示on,否则字段为空            
              if(data.elem.checked==false){
                  $("#washer").show();
              }else{
                  $("#washer").hide();
              }
        });  
        //点击加油站选中后下面的单选是当前加油站下的员工
        form.on('radio(jyzfilter)', function(data){
              console.log(data.elem); //得到radio原始DOM对象
              console.log(data.value); //被点击的radio的value值
              $.post('/admin/washercounts/lwaiter',{id:data.value},function(obj){
                  list=obj.data;
                  html='';
                  $.each(list,function(index,val){
                    html +='<input type="radio" name="work_id" class="layui-input" value="'+val.id+'" title="'+val.u_name+'">';
                  })              
                  $("#jiayouyuan").empty();
                  $("#jiayouyuan").append(html);
                  form.render('radio');
              })
              
        });  
    })
</script>  

第二部分:使用ajax获取表单数据传给后台Php操作。
<form class="layui-form">     //没有layui-form提交不了                 
  <div class="login-box-width">                                            
            <div class="form-box clearfix">                               
                <input type="text" name="username" lay-verify="required" id="loginAccount" placeholder="会员名" />
            </div>                              
            <div class="form-box clearfix">                          
                <input type="password" name="password" lay-verify="required" id="loginPassWord" placeholder="密码" />
            </div>                             
             <div class="layui-form-item">
                <div class="layui-input-block">
                <input type="checkbox" name="purview" lay-skin="primary" title="管理员页面" value="admin/index" >
                <input type="checkbox" name="purview" lay-skin="primary" title="添加管理员页面" value="admin/adduser" >
                <input type="checkbox" name="purview" lay-skin="primary" title="执行添加管理员" value="admin/insertuser" >
                 <!-- {volist name="book_list" id="vo"}
                    <input type="checkbox" lay-verify='required' name="books" title="{$vo.title}"  class="layui-input" value="{$vo.id}" 
                    {eq name='$chat_data["books"][$key] ?? ""' value="$vo.id" }checked{/eq}>
                  {/volist}-->
                </div>
            </div>                    
            <div class="form-box clearfix">
                <input type="text" name="code" lay-verify="required" id="loginsignincode" placeholder="验证码" />
                <div class="fr">                    
                    <img onclick="this.src='{:captcha_src()}?'+Math.random()" src="{:captcha_src()}" alt="captcha" class="VcodeImg" />
                </div>
            </div>                          
   <div class="layui-form-item">
       <label class="layui-form-label">上传图片</label>
       <div class="layui-input-block">
           <button type="button" class="layui-btn" id="uploadClick">
           <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" width="100px" height="100px" id="showPic">
            <p id="demoText"></p>
        </div>
           <input type="hidden" name="product_icon" id="pichidden">
       </div>

   </div>
   <button lay-submit lay-filter="myform" class="btn"  style="width: 100%">登录</button>
</form>

 <script type="text/javascript">
        layui.use(['form','upload'],function(){
            var form=layui.form;
            //监听提交事件
            form.on('submit(myform)',function(obj){
                  //obj.field打印出是:Object { username: "139691990", password: "139691990", code: "7qz4" }
                //fields=JSON.stringify(obj.field); //打印出是{"username":"139691990","password":"139691990","code":"7qz4"}
                var duoxuan= [];//复选框字段
                $('input[name=purview]:checked').each(function() {
                    duoxuan.push($(this).val());
                });
                obj.field.purview=duoxuan;                
                fields=JSON.stringify(obj.field);
                $.ajax({
                    type: "POST",
                    url: "logs",
                    data: {"val": fields},                    
                    success: function (result) {                      
                        layer.close(loading);
                        if (result.code== 1000) {
                            layer.msg(result.msg,{icon:1})                   
                        } else {
                            layer.msg(result.msg,{icon:2})
                            $(".VcodeImg").attr('src',"{:captcha_src()}?"+Math.random());//出错后自动更新验证码
                        }
                    }
                });
                return false;
            })
        //创建一个上传实例
            upload.render({
                elem:"#uploadClick",
                url:"__MODULE__/allow/upload?field=product_icon",
                accept:"images",//允许上传的文件类型
                acceptMime:"image/jpg,image/png,image/jpeg",//打开文件选择框时允许显示的文件类型
                exts:'jpg|png|jpeg',//允许上传的文件后缀
                size:30,//允许上传的文件大小
                auto:true,//选中文件自动上传
                field:'product_icon',
                before:function(obj){
                    //预览
                    obj.preview(function(index,file,result){
                        $('#showPic').attr('src',result);
                    })
                },done:function(res){
                    if(res.code==1000){
                        $('#pichidden').attr('value',res.data);
                        layer.msg(res.msg,{icon:1});
                    }else{
                        layer.msg(res.msg,{icon:2});
                    }
                }
            })
        })
    </script>


后台php操作:


     //获取请求信息
      //  input('val')打印出的数据:Object { code: 1001, msg: "验证码错误,请重新输入!", data: "{&quot;username&quot;:&quot;13969198590&quot;,&quot;password&quot;:&quot;13969198590&quot;,&quot;code&quot;:&quot;7qz4&quot;}" }

       $req=htmlspecialchars_decode(input('val')) ;//实体转字符
       $request=json_decode($req,true);//解析json为纯数组
    
      //执行产品图片上传
    public function upload($field){
       //获取请求的数据
       $file=request()->file($field);
       $info=$file->move(ROOT_PATH.'public'.DS.'static'.DS.'admin'.DS.'image'.DS.$field);
       if($info){
          return json(['code'=>1000,'msg'=>'上传成功','data'=>$info->getSaveName()]);
       }else{
          return json(['code'=>1001,'msg'=>$file->getError(),'data'=>'']);
       }
    }





标签: