LayUi之表单监听事件

HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui.form小例子</title>
    <script src="~/Content/layui/layui.js"></script>
    <link href="~/Content/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
    <form class="layui-form" action="/Home/AddUserInfo" method="get" lay-filter="formfilter">
        <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="Name" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">下拉选择框</label>
            <div class="layui-input-block">
            //监听下拉框事件 需要加上lay-filter="selectfilter"
                <select name="Role" lay-filter="selectfilter">
                    @foreach (var item in ViewBag.RoleList)
                    {
                        <option value="@item.Id">@item.RoleName</option>
                    }
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">爱好</label>
            <div class="layui-input-block">
                <input value="1" type="checkbox" name="LikeWrite" title="写作">
                <input value="2" type="checkbox" name="LikeRead" title="阅读">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="Gender" value="0" title="男">
                <input type="radio" name="Gender" value="1" title="女">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">请填写描述</label>
            <div class="layui-input-block">
                <textarea name="Descirpt" id="Descirpt" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="gofilter">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

JS

<script>
        layui.use(['form', 'jquery', 'layer'], function () {
            var form = layui.form;
            var $ = layui.$;
            var layer = layui.layer;
            //可局部刷新的元素 select,radio,checkbox
            form.render();          //刷新全部
            form.render('select');  //刷新select选择框
            form.render('select', 'selectfilter');//刷新layfilter为selectfilter1的select

            //**********************************预设元素属性
            lay-skin   //只对checkbox有效 ,可选switch,primary
            lay-filter //事件过滤器,用于匹配事件的准确性。不仅仅用于form
            lay-verify //规则验证
            lay-verType //不符合规则时显示风格,可选tips,alert,msg(默认)
            lay-submit  //绑定触发提交的元素

            //*************************************事件监控
            //监听的元素有select(选中) ,checkbox(勾选),swich(开关),radio(选择),submit(提交)
            form.on('select(selectfilter)', function (data) {
                console.log(data.elem);    //原生Dom
                console.log(data.value);   //选中的option的value
                console.log(data.othis);   //美化后Dom
            })

            form.on('radio', function (data) {
                console.log(data.elem);    //原生Dom
                console.log(data.value);   //选中的radio的value
                console.log(data.othis);   //美化后Dom
            })

            //checkbox和switch是一样的
            form.on('checkbox', function (data) {
                console.log(data.elem);           //原生Dom
                console.log(data.elem.checked);   //点击后的状态true,false                console.log(data.othis);          //美化后的Dom
            })

            //submit
            form.on('submit(gofilter)', function (data) {
                console.log(data.field)
                $.post('/Home/AddUserInfo', data.field, function (result) {
                    if (result.IsSuccess === 1) {
                        alert(result.Msg);
                    } else {
                        alert(result.Msg);
                    }
                })
                return false;//这里是拦截layui自带的提交
            })

            //*********************************表单验证
            //required(必填项)phone(手机号)email(邮箱)url(网址)number(数字)date(日期)identity(身份证)
            //也可以自定义,一个简单用户名密码的栗子:
            form.verify({
                validateUserName: [
                    /^[\S]{2,10}$/
                    , '用户名必须2到10位'
                ],
                validateUserPass: [
                    /^[\S]{3,20}$/
                    , '密码必须为3到20位'
                ],
                validateConfPass: function (value) {
                    var pass = $('#userPass').val();
                    if (value != pass) {
                        return '两次密码不一致';
                    }
                },
            });

            //**********************************赋初值,当我们修改或者展示详情时可用
            form.val("formfilter", {
                "Name": "haha" // "name": "value"
                , "Gender": 0        //对应radio的value值,
                , "Role": 3          //对应select下option的value值
                , "LikeRead": true   //对应checkbox
                , "Descirpt": "这里是用户描述哦"  //放在textarea中
            })
            console.log($('#Descirpt').val() + "xxx")  //获取textarea值的方式
        });
    </script>
</body>
</html>
  • 6
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
监听layui下拉表单的选择事件,可以通过layuiform模块来实现。 首先,需要引入layuiform模块: ```html <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script> ``` 然后,在页面加载完成后,需要初始化form模块: ```html <script> layui.use('form', function(){ var form = layui.form; // TODO: 在此处编写监听代码 }); </script> ``` 接着,可以通过form模块的`on`方法来监听下拉表单的选择事件: ```html <script> layui.use('form', function(){ var form = layui.form; form.on('select', function(data){ console.log(data.value); // 打印用户选择的选项的值 }); }); </script> ``` 在这个例子中,当用户选择下拉表单的选项时,将会触发`form.on('select', function(data){})`中的回调函数。`data`参数包含用户选择的选项的值,可以通过`data.value`来获取。 当然,你也可以给下拉表单设置一个`lay-filter`属性,然后在`form.on`方法中指定相应的`filter`来监听该下拉表单的选择事件。例如: ```html <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">城市</label> <div class="layui-input-inline"> <select name="city" lay-filter="city"> <option value="">请选择城市</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> <option value="shenzhen">深圳</option> </select> </div> </div> </form> <script> layui.use('form', function(){ var form = layui.form; form.on('select(city)', function(data){ console.log(data.value); // 打印用户选择的城市的值 }); }); </script> ``` 在这个例子中,我们给下拉表单设置了一个`lay-filter="city"`的属性,并在`form.on`方法中指定了`select(city)`的`filter`,这样就可以监听该下拉表单的选择事件了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

微微笑再加油

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值