layui(五)——form組件常見用法總結

時間 2019-12-08

標籤 layui form 組件常見用法總結简体版

原文原文鏈接

　　form 是咱們很是看重的一塊。layui中的form實現全自動的初始渲染，和基於事件驅動的接口書寫方式。我整理了layui中form的配置。下邊直接給一個栗子，後臺採用.net MVC，除了razor模板中用到了一點後臺的內容，其餘都是layui中的內容，這裏就不粘後臺代碼了：css

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">
                <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>