How to use event Monitoring in layui
This article will explain in detail how to use event monitoring in layui. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.
When using layui's form form to do validation submission, if combined with vue, or three-level linkage, you need to do event listening.
Specific grammar:
Form.on ('event (filter value), callback)
Can be used to monitor: changes in select,checkbox,switch,radio,submit
First, monitor the changes of select
Drop down the selection box to write, read and listen to the game layui.use ('form', function () {var form = layui.form; form.on (' select (aihao)', function (data) {console.log (data); console.log (data.elem)) / / get the original select DOM object console.log (data.value); / / get the selected value console.log (data.othis); / / get the beautified DOM object};})
Similarly, monitor checkbox check
Form.on ('checkbox (filter)', function (data) {console.log (data.elem); / get the original checkbox DOM object console.log (data.elem.checked); / / whether it is selected, true or false console.log (data.value); / / check box value value, you can also get console.log (data.othis) through data.elem.value; / / get the beautified DOM object})
Monitor the switch switch:
Form.on ('switch (filter)', function (data) {console.log (data.elem); / / get the original checkbox DOM object console.log (data.elem.checked); / / whether the switch is on, true or false console.log (data.value); / / switch value, console.log (data.othis) can also be obtained through data.elem.value; / / get the beautified DOM object})
Monitor radio radio:
Form.on ('radio (filter)', function (data) {console.log (data.elem); / / get the radio original DOM object console.log (data.value); / / the value of the radio clicked})
Monitor submit submission:
The element DOM object that submits the form.on ('submit (*), function (data) {console.log (data.elem) / / executed event) is usually the button object console.log (data.form) / / the form object submitted by execution. Generally, all the form fields of console.log (data.field) / / current container are returned only when there is a form tag. Name-value pair form: {name: value} return false / / prevent the form from jumping. If you need a form jump, you can remove this section. }); this is the end of the article on "how to use event Monitoring in layui". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.
