<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>