layui对象及相关事件

时间  2021-01-02

  1. 表单元素

     输入框

     密码框

     下拉列表【重新渲染】

是加入layui-form 引入form模块

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

     单选框【重新渲染】

是加入layui-form 引入form模块

     复选框【重新渲染】

是加入layui-form 引入form模块

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

     开关【重新渲染】

是加入layui-form 引入form模块

使用checkbox实现

lay-skin="switch"  使用皮肤

     文本域

     富文本

         

  1. 表单对象form

  1. 监听提交事件

  1. 监听下拉框改变事件

  1. 监听复选框改变事件

  1. 监听开关改变事件

  1. 监听单选框选中事件

  1. 元素渲染

  1. 表单初始赋值

     //初始化表单

                         $("#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

自定义验证

<%--

  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>

联系我们 沪ICP备13005482号-10