您的位置: 首页  >  文章  >  layui对象及相关事件

layui对象及相关事件

分类: 文章 • 2024-06-06 21:30:16

  1. 表单元素

     è¾“入框

     å¯†ç æ¡†

     ä¸‹æ‹‰åˆ—表【重新渲染】

是加入layui-form 引入form模块

lay-search=""  是否支持下拉输入过滤

     å•é€‰æ¡†ã€é‡æ–°æ¸²æŸ“】

是加入layui-form 引入form模块

     å¤é€‰æ¡†ã€é‡æ–°æ¸²æŸ“】

是加入layui-form 引入form模块

lay-skin="primary"  使用原始的样式

     å¼€å…³ã€é‡æ–°æ¸²æŸ“】

是加入layui-form 引入form模块

使用checkbox实现

lay-skin="switch"  使用皮肤

     æ–‡æœ¬åŸŸ

     å¯Œæ–‡æœ¬

layui对象及相关事件

         layui对象及相关事件

  1. 表单对象form

layui对象及相关事件

  1. 监听提交事件

layui对象及相关事件

layui对象及相关事件

  1. 监听下拉框改变事件

layui对象及相关事件

layui对象及相关事件

  1. 监听复选框改变事件

layui对象及相关事件

layui对象及相关事件

  1. 监听开关改变事件

layui对象及相关事件

layui对象及相关事件

  1. 监听单选框选中事件

layui对象及相关事件

layui对象及相关事件

  1. 元素渲染

layui对象及相关事件

layui对象及相关事件

  1. 表单初始赋值

layui对象及相关事件

layui对象及相关事件

     //初始化表单

                         $("#btn2").click(function(){

                              form.val("dataFrm",{

                                   username:'张大明',

                                   pwd:'123456',

                                   phone:'13311112222',

                                   email:'[email protected]',

                                   jiguan:'北京',

                                   sex:'女',

                                   //hobby:["写作","阅读","游戏"],

                                   ishere:false

                              });

                              

                              var hobby="写作,游戏";

                              var hobbys=hobby.split(",");

                              //得到hobbyElem

                              var hobbyElem=$("[name='hobby']");

                              $.each(hobbys,function(i,str){

                                   alert(str);

                                   $.each(hobbyElem,function(j,item){

                                        var jdom=$(item);// 把dom--转jdom

                                        if(jdom.val()==str){

                                             //jdom.attr({"checked",true});

                                             jdom.attr("checked","checked");

                                        }

                                   })

                              })

                              form.render();

                              

                         });

  1. 表单验证

使用方法

lay-verify="required|phone"

       ç›¸å…³çš„值

                  required  非空验证

                  phone  手机号验证

                  number 数值验证

                  url  链接地址验证 http://www.baid.com

自定义验证

layui对象及相关事件

layui对象及相关事件

<%--

  Created by IntelliJ IDEA.

  User: Lenovo

  Date: 2019/10/2

  Time: 21:32

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">

    <title>表单元素</title>

    <link rel="stylesheet" href="./libs/layui/css/layui.css">

    <link rel="stylesheet" href="./libs/css/global.css">

    <script type="text/javascript" src="./libs/layui/layui.js"></script>

</head>

<body>

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

    <div class="layui-inline">

    <div class="layui-form-item">

        <label class="layui-form-label">用户名</label>

        <div class="layui-input-inline">

            <input type="text" name="username" lay-verify="required|username" autocomplete="off" placeholder="用户名" class="layui-input">

        </div>

    </div>

    </div>

   

 

 

 

    <div class="layui-inline">

    <div class="layui-form-item">

        <label class="layui-form-label">用户密码</label>

        <div class="layui-input-inline">

            <input type="password" name="password" lay-verify="required|password" autocomplete="off" placeholder="用户密码" class="layui-input">

        </div>

    </div>

    </div>

 

 

 

 

    <div class="layui-form-item">

        <div class="layui-inline">

            <label class="layui-form-label">验证手机</label>

            <div class="layui-input-inline">

                <input type="tel" id="phone" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">

            </div>

        </div>

        

 

        <div class="layui-inline">

            <label class="layui-form-label">验证邮箱</label>

            <div class="layui-input-inline">

                <input type="text" id="email" name="email" lay-verify="email" autocomplete="off" class="layui-input">

            </div>

        </div>

    </div>

 

 

 

 

    <div class="layui-form-item">

        <div class="layui-inline">

        <label class="layui-form-label">籍贯</label>

        <div class="layui-input-inline">

            <select name="jiguan" id="jiguan" lay-filter="jiguan">

                <option value=""></option>

                <option value="广东">广东</option>

                <option value="广西" selected="">广西</option>

                <option value="山东">山东</option>

                <option value="山西">山西</option>

                <option value="北京">北京</option>

            </select>

            </div>

        </div>

    </div>

 

 

 

 

 

 

 

 

    <div class="layui-form-item">

        <label class="layui-form-label">单选框</label>

        <div class="layui-input-block">

            <input type="radio" lay-filter="sex" name="sex" value="男" title="男" checked="">

            <input type="radio" lay-filter="sex" name="sex" value="女" title="女">

            <input type="radio" lay-filter="sex" name="sex" value="禁" title="禁用" disabled="">

        </div>

    </div>

 

 

 

 

    <div class="layui-form-item">

        <label class="layui-form-label">爱好</label>

        <div class="layui-input-block">

            <input type="checkbox"  lay-filter="hobby" name="hobby" value="写作" title="写作">

            <input type="checkbox" lay-filter="hobby" name="hobby" value="阅读" title="阅读">

            <input type="checkbox" lay-filter="hobby" name="hobby" value="发呆" title="发呆">

        </div>

    </div>

 

 

 

 

 

 

 

 

 

 

 

 

    <div class="layui-form-item">

        <label class="layui-form-label">是否在职</label>

        <div class="layui-input-block">

            <input type="checkbox" name="isHere" lay-filter="isHere" checked="checked" lay-skin="switch" lay-text="是|否">

        </div>

    </div>

 

 

 

 

 

 

 

 

 

 

    <div class="layui-form-item">

        <div class="layui-input-block">

            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>

            <button type="reset" class="layui-btn layui-btn-primary">重置</button>

            <button type="button" id="btn1" class="layui-btn">向select里面添加一个深圳</button>

            <button type="button" id="btn2" class="layui-btn">初始化表单</button>

        </div>

    </div>

 

 

 

 

</form>

 

 

<script type="text/javascript">

    layui.use(['element','jquery','laydate','form','layedit'],function () {

        var $=layui.jquery;

        var element=layui.element;

        var laydate=layui.laydate;

        var form=layui.form;

        var layedit=layui.layedit;

        //监听提交事件

        form.on('submit(demo1)', function(data){

            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象

            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回

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

            //使用ajax提交

            //$.post();

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

        });

 

 

        //监听下拉框改变事件

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

            console.log(data.elem); //得到select原始DOM对象

            console.log(data.value); //得到被选中的值

            console.log(data.othis); //得到美化后的DOM对象

        });

 

 

        //监听复选框的改变事件

        form.on('checkbox(hobby)', 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(isHere)', 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(sex)', function(data){

            console.log(data.elem); //得到radio原始DOM对象

            console.log(data.value); //被点击的radio的value值

        });

 

 

 

 

        //元素渲染

        //监控按钮事件

        $("#btn1").click(function () {

            //得到select对象

            var jg=$("#jiguan");

            jg.append("<option value=深圳>深圳</option>");

            //渲染下拉框

            form.render('select');

            // 或者渲染所有 form.render();

        });

 

 

 

 

        //表单初始值赋值

        //初始化表单

        $("#btn2").click(function () {

            form.val("dataFrm",{

                username:'洲洲',

                password:'123456',

                phone:'13712500119',

                email:'[email protected]',

                jiguan:'广东',

                sex:'女',

               // hobby:["写作","阅读","游戏"],

                isHere:false

            });

 

 

            var hobby="写作,阅读,发呆";

            var hobbys=hobby.split(",");

            //得到hobbyElem=$()

            var hobbyElem=$("[name='hobby']");

            $.each(hobbys,function (i,str) {

                $.each(hobbyElem,function (j,item) {

                    var jdom=$(item);//把dom--转jdom

                    if(jdom.val()==str){

                        jdom.attr("checked","checked");

                    }

                })

            })

            form.render()

        });

 

 

 

 

 

 

 

 

        //表单验证

        //拓展自定义验证规则

        form.verify({

            username:[

                /^[\S]{6,12}$/

                ,'用户名必须6到12位，且不能出现空格'

            ],

            password: [

                /^[\S]{6,12}$/

                ,'密码必须6到12位，且不能出现空格'

            ]

        });

    });

</script>

</body>

</html>

 

 

 

相关推荐