java小王博客

记录菜B的一点一滴,欢迎各位好汉前来叨扰!


>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>博主qq:1756691861

layui表单部分

2020-6-23 卑微小王 Layui框架

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../layui/css/layui.css"/>
</head>
<body>

<form class="layui-form" action="" lay-filter="example">

<div class="layui-form-item">
<div class="layui-inline">
  <label class="layui-form-label">输入框</label>
  <div class="layui-input-block">
<input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
  </div>
</div> 
  <div class="layui-inline">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
  <input type="text" name="password" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
</div>
  </div>
</div>





  <div class="layui-form-item">
    <div class="layui-input-block">
     
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" id="2">立即提交</button>
  <button type="submit" class="layui-btn layui-btn-danger" lay-submit="" lay-filter="demo2">重置</button>
    </div>
  </div>
   
   <!--   搜索框   开启搜索匹配lay-search -->
   <select name="city" lay-verify="" lay-filter="selectcity" lay-search>
     <option value="010">layer</option>
     <option value="021">form</option>
     <option value="0571" selected>layim</option>
     ……
   </select>  
    </form>


<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>

<script>
// form.render(); //更新全部
              //form.render('select','lay-filter'); //刷新select选择框渲染
// form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器内的全部表单状态
// form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器内的全部 select 状态
layui.use(["form","jquery"],function(){
//获取form对象
  var form= layui.form;
  
  

//for的监听类型  
     // select 监听select下拉选择事件
// checkbox 监听checkbox复选框勾选事件
// switch 监听checkbox复选框开关事件
// radio 监听radio单选框事件
// submit
 
 
//监听下拉选择框

form.on('select(selectcity)',function(data){




console.log(data.value)
});
 
 
 
 
 
//监听提交
form.on('submit(demo1)', function(data){

   // layer.alert(JSON.stringify(data.field), {
   //   title: '最终的提交信息'
   // })
   console.log(data.field)
  
   return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
});
// //表单取值
// layui.$('#2').on('click', function(){
//   var data = form.val('example');
//   alert(JSON.stringify(data));
//   当对点击按钮对form表单中的某一元素进行操作后例如
//  为下拉框新添加一个选择记得刷新
//    form.render();刷新所有(也叫渲染)
//  form.render("select",'aihao');//渲染下拉框并且是filter是aihao的
//
// });
})

</script>
</body>
</html>

发表评论: