注册小案例
1、效果图：
2、代码详细
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><style>*{padding: 0;margin: 0;color: #000;}body{position: relative;}.index{position: relative;}img{position: fixed;width: 1920px;}.zhu{position: absolute;width: 380px;height: 480px;background-color: rgba(250, 250, 250,0.47);left: 750px;top: 225px;border-radius:7%;-webkit-filter: blur(4px);-moz-filter: blur(4px);-ms-filter: blur(4px);-o-filter: blur(4px);filter: blur(4px);filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);box-shadow: 5px 7px 27px rgba(0, 0, 0,0.47);overflow: hidden;-webkit-animation: zhu 15s linear infinite;animation: zhu 15s linear infinite;}h1{position: absolute;left: 125px;margin-top: 30px;}.shu{position: absolute;left: 814px;top: 270px;}.shu input{display: block;width: 247px;height: 37px;background-color:transparent;border: 2px solid rgb(9, 186, 240);}.shu p{font-size: 20px;margin-top: 20px;}.shu h2{margin-left: 77px;font-size: 27px;}.tijiao{position: absolute;top: 600px;left: 814px;}.tijiao input{width: 247px;height: 37px;font-size: 17px;background-color:transparent;border: 2px solid rgb(9, 186, 240);cursor:pointer;}#z_error{display: none;}style>
head>
<body>
<form action="#"><img src="1169134.jpg" alt="火影忍者"><div class="index"><div class="zhu">div> <div class="shu"><h2>注册用户h2><p>用户名：p><input type="text" placeholder="用户名的长度为5字符" name="name" maxlength="8" id="user"><span style="position: absolute;right: 0;color: rgb(255, 1, 1);" id="z_error">你的用户名长度不符合span><p>密码：p><input type="password" name="password" placeholder="密码的长度为6-18字符" id="password"><span style="position: absolute;right: 0;color: rgb(255, 1, 1);" id="z_error">你的密码长度不符合span><p>确认密码：p><input type="password" name="password" placeholder="密码的长度为6-18字符" id="password"><span style="position: absolute;right: 0;color: rgb(255, 1, 1);" id="z_error">前后密码不一致span>div><div class="tijiao"><input type="submit" value="免费注册" id="succes">div>div><script>var user = document.querySelector("#user");var password = document.querySelectorAll("#password")var z_error = document.querySelectorAll("#z_error");var succes = document.querySelector("#succes");var flag = false;var rag = 0;user.addEventListener('blur',function(){rag = /^.{0,5}$/; var z_name = user.value.trim();if (rag.test(z_name)){flag = true;z_error[0].style.display = 'none';}else{flag = false;z_error[0].style.display = 'block';}});var z_pwd = 0;password[0].addEventListener('blur',function(){rag = /^[0-9a-zA-Z]{6,16}$/; z_pwd = password[0].value;if (rag.test(z_pwd)){flag = true;z_error[1].style.display = 'none';}else{flag = false;z_error[1].style.display = 'block';}});password[1].addEventListener('blur',function(){var z_pwd1 = password[1].value;if (z_pwd == z_pwd1){flag = true;z_error[2].style.display = 'none';}else{flag = false;z_error[2].style.display = 'block';}});succes.addEventListener('click',function (e){if (flag == false){e.preventDefault();}});script>
form>
body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
