Layuiの表单提交监听

Layui的表单

<form class="layui-form">
			<div class="layui-form-item">
	 		 	<label class="layui-form-label">姓名:</label>
			    <div class="layui-input-inline">
			      <input id="username" name="username" type="text"  required lay-verify="required" placeholder="请输入姓名" class="layui-input">
			    </div>

			    <label class="layui-form-label">学院:</label>
			    <div class="layui-input-inline">
			      <input id="institution" name="institution" required  lay-verify="required" placeholder="请输入学院" class="layui-input">
			    </div>
			</div>
			
			<div class="layui-form-item">
				    <div class="layui-input-block">
				      <button id="submit_btn" class="layui-btn"  lay-submit lay-filter="formDemo">下一步</button>
				    </div>
			</div>
</form>
<script>
	layui.use('form', function(){  //初始化form模块
		  var form = layui.form;//获取form模块
		  
		  //监听提交按钮
		  form.on('submit(formDemo)', function(data){// 这里的formDemo是lay-filter的值。
		  		layer.msg(JSON.stringify(data.field));//json格式化
    			return false;
		  });
	 
	});
</script>

 此外<input> 标签中的name属性不能省略。因为name的属性值对象Json的关键字。 

<input name="title"  type="text" />        JSON.stringify（data.field）输出结果为：{"title":"mytest"}

 监听提交按钮时使用方法：form.on('sumbit(filter-name)',function(){   //filter-name：即lay-filter的属性值

                                                         若干代码............

                                                         });

 

 

F12：这说明

     按钮点击或者表单被执行提交时触发，其中回调函数只有在验证全部通过后才会进入，回调返回三个成员：

              elem//被执行事件的元素DOM对象，一般为button对象

              field//当前容器的全部表单字段，名值对形式：{name: value}

              form//被执行提交的form对象，一般在存在form标签时才会返回