form-layui

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 状态

更多操作请参考 http://www.layui.com/doc/modules/form.html