form 是我们非常看重的一块。layui中的form实现全自动的初始渲染，和基于事件驱动的接口书写方式。我整理了layui中form的配置。下边直接给一个栗子，后台采用.net MVC，除了razor模板中用到了一点后台的内容，其他都是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"> <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.value); // 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下的value值 , "LikeRead": true //对应checkbox , "Descirpt": "这里是用户描述哦" //放在textarea中 }) console.log($('#Descirpt').val() + "xxx") }); </script> </body> </html>
注:这是为了个人查找方便整理的文档，并没有总结完全，查看更多可访问官网http://www.layui.com/doc