tp5中layui form表单模块加载
发布时间:2023-11-22作者:小灵龙点击:160
<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>
<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"></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>
//获取请求信息
// input('val')打印出的数据:Object { code: 1001, msg: "验证码错误,请重新输入!", data: "{"username":"13969198590","password":"13969198590","code":"7qz4"}" }
$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'=>'']);
}
}