layui-登陆
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陆</title>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="img/6.jpg">
</head>
<body>
<div class="login-main">
<header class="layui-elip">后台登录</header>
<form class="layui-form">
<div class="layui-input-inline">
<input type="text" name="account" required lay-verify="required" placeholder="邮箱" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline">
<input type="password" name="password" required lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline login-btn">
<button type="submit" class="layui-btn">登录</button>
</div>
<hr/>
<div class="layui-input-inline">
<button type="button" class="layui-btn layui-btn-primary">QQ登录</button>
</div>
<!--<div class="layui-input-inline">
<button type="button" class="layui-btn layui-btn-normal">微信登录</button>
</div>-->
<p><a href="javascript:;" class="fl">立即注册</a><a href="javascript:;" class="fr">忘记密码?</a></p>
</form>
</div>
<script src="layui/layui.js"></script>
<script type="text/javascript">
layui.use(['form'], function () {
var form = layui.form(), $ = layui.jquery;
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陆</title>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="img/favicon.png">
</head>
<body class="login-body body">
<div class="login-box">
<form class="layui-form layui-form-pane" method="get" action="">
<div class="layui-form-item">
<h3>xx后台登录系统</h3>
</div>
<div class="layui-form-item">
<label class="layui-form-label">账号:</label>
<div class="layui-input-inline">
<input type="text" name="account" class="layui-input" lay-verify="account" placeholder="账号" autocomplete="on" maxlength="20"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码:</label>
<div class="layui-input-inline">
<input type="password" name="password" class="layui-input" lay-verify="password" placeholder="密码" maxlength="20"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">验证码:</label>
<div class="layui-input-inline">
<input type="number" name="code" class="layui-input" lay-verify="code" placeholder="验证码" maxlength="4"/><img src="img/v.png" onclick="getImage()" title="单击刷新验证码" id="img_rand_code" alt="">
</div>
</div>
<div class="layui-form-item">
<button type="reset" class="layui-btn layui-btn-danger btn-reset">重置</button>
<button type="button" class="layui-btn btn-submit" lay-submit="" lay-filter="sub">立即登录</button>
</div>
</form>
</div>
<script src="layui/layui.js"></script>
<script type="text/javascript">
layui.use(['form', 'layer'], function () {
var $ = layui.jquery,form = layui.form(),layer = layui.layer;
// 验证
form.verify({
account: function (value) {
if (value == "") {
return "请输入用户名";
}
},
password: function (value) {
if (value == "") {
return "请输入密码";
}
},
code: function (value) {
if (value == "") {
return "请输入验证码";
}
}
});
// 提交监听
form.on('submit(sub)', function (data) {
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
});
return false;
})
})
//刷新验证码
function getImage() {
// $("#img_rand_code").attr("src", "" + Date());
alert("123");
}
</script>
</body>
</html>