form-layui

时间：2022-09-14 11:45:15
html
<div id="formData">

            <form class="layui-form formBtn" style="margin-right:50px;margin-top:50px">

                <input type="hidden" name="ID" id="id">

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

                    <label class="layui-form-label">账号</label>

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

                        <input type="text" name="Account" lay-verify="required|account" autocomplete="off" class="layui-input">

                    </div>

                </div>

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

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

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

                        <button type="button" class="layui-btn layui-btn-primary" id="cancelBtn">取消</button>

                    </div>

                </div>

            </form>

        </div>
内置表单验证
<input type="text" lay-verify="required|phone|number">

    <input type="text" lay-verify="email">
自定义验证
function valideForm(){

                //自定义验证规则

                form.verify({//内置验证 required（必填项）、phone（手机号）、email（邮箱）、url（网址）、number（数字）、date（日期）、identity（身份证）

                    account: function(value){

                        if(value.length > 12 || value.length < 6 ){

                            return '账号长度必须在6~12之间';

                        }

                    }//与元素的lay-verify属性对应

                })

            }
自定义了上面的验证规则后，只需要把key赋值给输入框的 lay-verify，如：
<input type="text" lay-verify="username" placeholder="请输入用户名">

        <input type="password" lay-verify="pass" placeholder="请输入密码">
 监听form提交 
//监听form提交  form.on('submit(formSubmit)', callback);formSubmit是提交按钮的lay-filter

            form.on('submit(formSubmit)',function(){

               //do something

            })
更新渲染
有些表单元素可能是动态插入的。这时 Form模块 的自动化渲染是会对其失效的，没有双向绑定机制
之前使用开关按钮时设置按钮状态，一直没有效果，后来头疼了好久才发现需要更新渲染。。。心累~
//参数（type）值select/checkbox/radio

            form.render(type, filter);

            form.render(); //更新全部

            form.render('select'); //刷新select选择框渲染

            form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器内的全部表单状态

            form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器内的全部 select 状态
 

相关文章