标签：layer false tipsMore HTML nbsp return tips 提示框
下载layer
下载地址，https://layer.layui.com/
说明弹出框依赖组件
下载jquery
下载地址，https://jquery.com/download/
说明 jQuery 是一个 JavaScript 函数库，jQuery 库可以通过一行简单的标记被添加到网页中。
下载bootstrap
下载地址，https://getbootstrap.com/
说明提示框不需要依赖这个框架，它是提供了美化样式的前端控件框架。
登录提示框显示
<html>
<head>
<title>
登录
</title>
</head>
<h3 align="center">欢迎访问</h3>
<style type="text/css">
body{
background-image:url("/content/source/static/img/login.jpg");
background-repeat:no-repeat;
background-size:100%;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="plugins/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="plugins/bootstrap/css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
<script src="plugins/jquery-3.3.1.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="plugins/layer-v3.5.1/layer/layer.js"></script>
<script>
function loginCheck()
{
var id = document.forms["myform"]["loginId"].value;
var pwd = document.forms["myform"]["loginPwd"].value;
if (id == "admin" && pwd == "1234")
{
layer.tips('登陆成功',"#loginPwd",
{
tips: [2,'#0FA6D8'],
tipsMore: false,
time: 2000
})
return true;
}
else if(id == "" && pwd == "")
{
layer.tips('请输入账号密码',"#loginPwd",
{
tips: [2,'#0FA6D8'],
tipsMore: false,
time: 2000
})
return false;
}
else if(id != "" && pwd == "")
{
layer.tips('请输入密码',"#loginPwd",
{
tips: [2,'#0FA6D8'],
tipsMore: false,
time: 2000
})
return false;
}
else if(id == "admin" && pwd != "1234")
{
layer.tips('密码错误',"#loginPwd",
{
tips: [2,'#0FA6D8'],
tipsMore: false,
time: 2000
})
return false;
}
else if(id != "admin")
{
layer.tips('用户名不存在',"#loginId",
{
tips: [2,'#0FA6D8'],
tipsMore: false,
time: 2000
})
return false;
}
else
{
layer.tips('未知错误',"#loginId",
{
tips: [2,"#FF1030"],
tipsMore: false,
time: 2000
})
return false;
}
}
</script>
<body>
<div align="center">
<form name="myform" method="post" action="/content/login" onsubmit="return loginCheck()">
<div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
账号：<input id="loginId" name="loginId" type="text" style="text-aglin: center;">
<br>
密码：<input id="loginPwd" name="loginPwd" type="text" style="text-aglin: center;">
<br>
<button type="submit" align="center">登录</button>
<br>
</div>
</form>
</body>
</html>
标签：layer,false,tipsMore,HTML,nbsp,return,tips,提示框 来源： https://blog.csdn.net/qq_38641985/article/details/118556546
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。