Laui의 Form 폼을 검증 및 제출용으로 사용할 때, Vue나 3단계 연동과 결합할 경우 이벤트 모니터링이 필요합니다.
특정 구문:
form.on('event(filter value)', callback);
모니터링에 사용할 수 있음: select, checkbox, switch, radio, submit의 변경 사항
1. select의 변경 사항 모니터링
<!-- 不用form 用div也可以 --> <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">下拉选择框</label> <div class="layui-input-block"> <select name="interest" lay-filter="aihao"> <option value="0">写作</option> <option value="1">阅读</option> <option value="2">听歌</option> <option value="4">游戏</option> </select> </div> </div> </form> <script type="text/javascript" src="./layui/layui.js"></script> <script type="text/javascript"> layui.use('form', function(){ var form = layui.form; form.on('select(aihao)',function(data){ console.log(data); console.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中的值 console.log(data.othis); //得到美化后的DOM对象 }); }); </script>
마찬가지로, 모니터 체크박스 체크
form.on('checkbox(filter)', function(data){ console.log(data.elem); //得到checkbox原始DOM对象 console.log(data.elem.checked); //是否被选中,true或者false console.log(data.value); //复选框value值,也可以通过data.elem.value得到 console.log(data.othis); //得到美化后的DOM对象 });
모니터 스위치:
form.on('switch(filter)', function(data){ console.log(data.elem); //得到checkbox原始DOM对象 console.log(data.elem.checked); //开关是否开启,true或者false console.log(data.value); //开关value值,也可以通过data.elem.value得到 console.log(data.othis); //得到美化后的DOM对象 });
모니터 라디오 단일 선택:
form.on('radio(filter)', function(data){ console.log(data.elem); //得到radio原始DOM对象 console.log(data.value); //被点击的radio的value值 });
모니터 제출 제출:
<button lay-submit lay-filter="*">提交</button> form.on('submit(*)', function(data){ console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象 console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回 console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value} return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。 });
레이유에 대한 더 많은 지식은 layui 사용법 튜토리얼 칼럼을 주목해주세요.
위 내용은 Layui 이벤트 청취 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!