<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单验证</title>
<script>
function closeErrorMsg(){
var errorElement=document.getElementById("error-mag");
errorElement.style.display="none"; /*none就是没有的意思*/
}function displayErrorMsg(){
var errorElement=document.getElementById("error-mag");
errorElement.style.display="block";
}
window.onload=function(){
var closeElement = document.getElementById("close-error-msg");
closeElement.onclick = closeErrorMsg;
//把closeErrorMsg赋值给onclick点击事件
document.getElementById("submit-btn").onclick=checkFrom;
// document.getElementById("username").onblur=checkUsername;
var params = location.search;
console.log("params:----->",params); //?login=fail
//失去焦点时触发
if(params){
displayErrorMsg;
}
}
/*
1.将提交按钮绑定一个点击事件
2.给该事件对应的操作：定义校验输入的用户名和密码是否合法
3.定义点击事件要做的操作
*/
/*校验用户名和密码：用户名和密码都符合我们定义的规则时才返回true，否则false
1.校验用户名
2.校验密码
*/
function checkForm(){
// 定义点击事件要做的操作；检查用户名和密码
// 都通过，则返回true，否则false
return checkUsername() && checkPassword();
}
function checkUsername(){
// 检查用户名，通过校验返回rue，否则返回false并且展示错误提示；
var usernameElement=document.getElementById("username");
var username=usernameElement.value;
//通过usernameElement对象，value属性获得用户在框里面输入的值
var reg=/^\w{4,12}/; //定义正则表达式，规定用户名为4到12个
var isValidUsername=reg.test(username); //校验用户名
//校验不通过展示错误信息
if(!isValidUsername){ //不等于false
//展示错误信息
displayErrorMsg();
}
return isValidUsername;
}
function checkPassword(){
// 检查密码，通过校验返回rue，否则返回false并且展示错误提示；
var passwordElement = document.getElementById(\'password\');
var passsword = passwordElement.value;
var qw = /^\d{6,12}/;
var isValidPassword = qw.test(password); //校验密码
if(!isValidPassword){ //不等于false
//展示错误信息
displayErrorMsg();
}
return isValidPassword;
}
</script>
<style>
body{
background-color: #0D1117;
color: #c9d1d9;
}
.contaiter{
width: 400px;
margin: 0 auto;
}
.top{
text-align: center;
/* 让top里面的图片水平居中 */
margin-top: 30px;
}
.top>img{
/* 选择top下面的img标签 */
width: 60px;
/* 设置img图片的宽度 */
}
.title{
text-align: center;
height: 60px;
font-size: 40px;
line-height: 60px;
font-weight: 300px;
margin: 20px auto;
}
.error-msg{
height: 60px;
background-color: #382328;
border: 1px solid #853535;
border-radius: 5px;
font-size: 18px;
text-align: center;
line-height: 60px;
position: relative;
}
.error-msg>img{
width: 25px;
position: absolute;
right: 10px;
top: 30%;
cursor: pointer;
/* 把鼠标变为手形 */
}
.error-msg>img:hover{
background-color: rgb(139, 42, 25);
}
.main{
border: 1px solid #212621;
border: radius 8px;
margin-top: 20px;
border-radius: 5px;
}
.main>label{
display: block;
}
.input-box{
display: block;
width: 90%;
margin: auto;
padding-left: 10px;
border-radius:5px;
/* 圆角 */
border: 1px solid #30363d;
height: 35px;
color: white;
box-sizing: border-box;
/* 盒子设置padding后，尺寸会被撑开 ,可以通过borde设置*/
margin-bottom: 15px;
margin-top: 8px;
background-color: #212621;
-webkit-test-fill-color:white;
/* 改变历史记录文字的颜色 */
caret-color: white;
/* 设置选择历史记录的光标颜色 */
}
.submit-btn{
width: 100%;
background-color: #0f8f26;
height: 35px;
border-radius: 5px;
color: white;
cursor: pointer;
/* 鼠标变为手形 */
}
.submit-btn:hover{
background-color: rgb(37, 189, 37);
}
.input-box:webkit-autofill{
box-shadow: 0 0 0 40px #161b22 inset;
/* 改变历史记录的背景颜色 */
}
</style>
</head>
<body>
<!-- 表单验证 -->
<div class="contaiter">
<div class="top">
<img src="images/github-fill.png" alt="" width="60px" height="60px">
</div>
<div class="title" >sign in to github</div>
<div class="error-msg" id="error-mag">
<span>
incorrect username or password
</span>
<img src="images/close.png" alt="" id="close-error-msg"></div>
<div class="main">
<form action="login" method="post">
<label>username or email address</label>
<input type="text" name="username" class="input-box" id="username">
<label >password</label>
<input type="password" class="input-box" id="password" name="abc">
<input type="submit" value="sing in" class="submit-btn" id="submit-btn">
</form>
</div>
<div class="footer">NO SING TO onclick</div>
</div>
</body>
</html>