Utilisation de la surveillance des événements layui-Tutoriel Layui-php.cn

Utilisation de la surveillance des événements layui

尚

Libérer： 2019-11-27 13:25:38

avant

4071 Les gens l'ont consulté

Utilisation de la surveillance des événements layui

Lors de l'utilisation du formulaire de layui pour la vérification et la soumission, s'il est combiné avec une vue ou une liaison à trois niveaux, une surveillance des événements est requise.

Syntaxe spécifique :

form.on(&#39;event(过滤器值)&#39;, callback);

Copier après la connexion

peut être utilisé pour surveiller : les modifications dans la sélection, la case à cocher, le commutateur, la radio, la soumission

Surveiller les modifications dans la sélection

<!-- 不用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(&#39;form&#39;, function(){
    var form = layui.form;
    form.on(&#39;select(aihao)&#39;,function(data){
        console.log(data);
        console.log(data.elem); //得到select原始DOM对象
        console.log(data.value); //得到被选中的值
        console.log(data.othis); //得到美化后的DOM对象
    });
});
</script>

Copier après la connexion

<. 🎜 > De même, cochez la case du moniteur

form.on(&#39;checkbox(filter)&#39;, 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对象
});

Copier après la connexion

Commutateur de moniteur :

form.on(&#39;switch(filter)&#39;, 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对象
});

Copier après la connexion

Surveillez la sélection unique de la radio :

form.on(&#39;radio(filter)&#39;, function(data){
    console.log(data.elem); //得到radio原始DOM对象
    console.log(data.value); //被点击的radio的value值
});

Copier après la connexion

Surveillez la soumission :

<button lay-submit lay-filter="*">提交</button>
form.on(&#39;submit(*)&#39;, function(data){
    console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
    console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
    console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});

Copier après la connexion

Plus Pour plus connaissances layui, veuillez faire attention à la colonne

tutoriel d'utilisation de layui.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!