示例地址
http://www.layui.com/demo/
下载地址
http://www.layui.com/
示例代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>演示/教程 - layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link rel="stylesheet" href="layui/css/layui.css"> <body> <div style="width: 1000px; margin: 30px auto;"> <h1 style="margin-bottom: 20px; padding-bottom: 20px; font-size: 20px; font-weight: 300; color: #999; border-bottom: 1px solid #eee;">layui.form 表单模块 部分演示 - (所有文档都在陆续整理,敬请谅解)</h1> <form action="" class="layui-form"> <ul> <li class="layui-form-li"> <div class="layui-form-label"> <label>用户</label> <input required type="text" name="username" check="username"></div> </li> <li class="layui-form-li"> <div class="layui-form-label"> <label>密码</label> <input required type="password" name="password"></div> <div class="layui-inline layui-form-tips">密码强度可以按照需求选择性开启</div> </li> <li class="layui-form-li"> <div class="layui-form-label"> <label>邮箱</label> <input required type="text" check="email" name="email"></div> </li> </li> <li class="layui-form-li"> <fieldset> <legend>爱好</legend> <div class="layui-form-label layui-form-checkbox"> <label>音乐</label> <input required type="checkbox" name="love[yinyue]"></div> <div class="layui-form-label layui-form-checkbox"> <label>写作</label> <input required type="checkbox" checked name="love[xiezuo]"></div> <div class="layui-form-label layui-form-checkbox"> <label>敲代码</label> <input required type="checkbox" name="love[daima]"></div> <div class="layui-form-label layui-form-checkbox"> <label>旅行</label> <input required type="checkbox" name="love[lvxing]"></div> <div class="layui-form-label layui-form-checkbox"> <label>做自己想做的事咯</label> <input required type="checkbox" name="love[daima]"></div> </fieldset> </li> <li class="layui-form-li"> <div class="layui-form-label"> <label>省份</label> <select required name="province"> <option value="浙江省">浙江省</option> <option value="江西省">江西省</option> <option value="上海市">上海市</option> <option value="福建省">福建省</option> <option value="湖北省">湖北省</option> <option value="江苏省">江苏省</option> <option value="安徽省">安徽省</option> <option value="北京市">北京市</option> <option value="香港">香港</option> <option value="澳门">澳门</option> <option value="*省">*省</option> </select> </div> <div class="layui-form-label"> <label>城市/县</label> <select required name="city"> <option value="杭州">杭州</option> <option value="南昌">南昌</option> </select> <select required name="village"> <option value="中关村">中关村</option> <option value="华西村">华西村</option> </select> </div> </li> <li class="layui-form-li"> <div class="layui-form-label layui-form-area"> <label>内容</label> <textarea required name="content"></textarea> </div> </li> <li class="layui-form-li"> <button class="layui-form-button">提交</button> </li> </ul> </form> </div> <script src="layui/layui.js"></script> <script> layui.use('form', function(){ var form = layui.form; //验证 form.check({ custom: { username: function(value){ if(value.replace(/\s/g, '') === ''){ return '用户名不能为空'; } } } }, function(data){ layer.msg(JSON.stringify(data), {time: 6000}); }); //密码强度 form.pass(); //多选框 form.checkbox(); //下拉选择框 form.select(); }); </script> </body> </html>