<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="layui/css/layui.css"> <style type="text/css"> .container{ width: 420px; height: 320px; min-height: 320px; max-height: 320px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; padding: 20px; z-index: 130; border-radius: 8px; background-color: #fff; box-shadow: 0 3px 18px rgba(100, 0, 0, .5); font-size: 16px; } .close{ background-color: white; border: none; font-size: 18px; margin-left: 410px; margin-top: -10px; } .layui-input{ border-radius: 5px; width: 300px; height: 40px; font-size: 15px; } .layui-form-item{ margin-left: -20px; } #logoid{ margin-top: -16px; padding-left:150px; padding-bottom: 15px; } .layui-btn{ margin-left: -50px; border-radius: 5px; width: 350px; height: 40px; font-size: 15px; } .verity{ width: 120px; } .font-set{ font-size: 13px; text-decoration: none; margin-left: 120px; } a:hover{ text-decoration: underline; } </style> </head> <body> <form class="layui-form" action="" method="post"> <div class="container"> <button class="close" title="關閉">X</button> <div class="layui-form-mid layui-word-aux"> <img id="logoid" src="06.png" height="35"> </div> <div class="layui-form-item"> <label class="layui-form-label">用戶名</label> <div class="layui-input-block"> <input type="text" name="title" required lay-verify="required" placeholder="請輸入用戶名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密 碼</label> <div class="layui-input-inline"> <input type="password" name="password" required lay-verify="required" placeholder="請輸入密碼" autocomplete="off" class="layui-input"> </div> <!-- <div class="layui-form-mid layui-word-aux">輔助文字</div> --> </div> <div class="layui-form-item"> <label class="layui-form-label">驗證碼</label> <div class="layui-input-inline"> <input type="text" name="title" required lay-verify="required" placeholder="請輸入驗證碼" autocomplete="off" class="layui-input verity"> </div> <!-- <div class="layui-form-mid layui-word-aux">輔助文字</div> --> </div> <!-- <div class="layui-form-item"> <label class="layui-form-label">記住密碼</label> <div class="layui-input-block"> <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF"> </div> </div> --> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">登陸</button> </div> </div> <a href="" class="font-set">忘記密碼?</a> <a href="" class="font-set">立即注冊</a> </div> </form> <script type="text/javascript" src="layui/layui.js"></script> <script> layui.use(['form', 'layedit', 'laydate'], function(){ var form = layui.form ,layer = layui.layer ,layedit = layui.layedit ,laydate = layui.laydate; //日期 /* laydate.render({ elem: '#date' }); laydate.render({ elem: '#date1' }); //創建一個編輯器 var editIndex = layedit.build('LAY_demo_editor'); //自定義驗證規則 form.verify({ title: function(value){ if(value.length < 5){ return '標題至少得5個字符啊'; } } ,pass: [ /^[\S]{6,12}$/ ,'密碼必須6到12位，且不能出現空格' ] ,content: function(value){ layedit.sync(editIndex); } }); //監聽指定開關 form.on('switch(switchTest)', function(data){ layer.msg('開關checked：'+ (this.checked ? 'true' : 'false'), { offset: '6px' }); layer.tips('溫馨提示：請注意開關狀態的文字可以隨意定義，而不僅僅是ON|OFF', data.othis) });*/ //監聽提交 form.on('submit(demo1)', function(data){ layer.alert(JSON.stringify(data.field), { title: '最終的提交信息' }) return false; }); //表單初始賦值 /* form.val('example', { "username": "賢心" // "name": "value" ,"password": "123456" ,"interest": 1 ,"like[write]": true //復選框選中狀態 ,"close": true //開關狀態 ,"sex": "女" ,"desc": "我愛 layui" })*/ }); </script> </body> </html>
