一css代码.
<style type="text/css"> body{margin:0;padding: 0;} .login {position:absolute; margin:150px auto; top:-30px; left:105px; width: 400px; border:1px solid white; background: #7EE2B5; border-radius: 10px; transform: rotate(-15deg); } .login2 { position:relative; margin:100px auto; padding:50px 20px; width: 650px; height: 500px; border:1px solid white; background: #DDEEDE; border-radius: 10px; transform: rotate(-5deg); } .login1 { position:absolute; margin:0 auto; top:-10px; left:25px; width: 600px; height: 500px; border:1px solid white; border-radius: 10px; background: #DDEEE3; transform: rotate(20deg); } .login legend { font-weight: bold; color:green; text-align: center; } .login label{ display:inline-block; width:130px; text-align: right; } #btn { height: 30px; width:100px; padding: 5px; border:0; background-color: #00dddd; font-weight: bold; cursor: pointer; border-radius: 10px; margin-left: 140px; } input{ height: 30px; width: 170px; border-radius: 6px; } input:focus{ border-color: #66afe9; outline: 0; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); } .borderRed{border: 2px solid red;} img{display: none; border-radius: 11px;} strong{ width: 200px; height: 30px; color:#000; border:1px solid red; display: inline-block; text-align: center; border-radius: 5px 15px; border-left:none; box-shadow: inset 0 1px 1px red,0 1px 1px red; } </style>
二.html代码
<body> <div class="login2"> <div class="login1"> <div class="login" <form name="form" action="jshuanfu.html" method="get" id="form1" οnsubmit="return check()"> <legend>注册系统</legend> <p><label for="name">用户名: </label> <input type="text" id="name" οnblur="checkName()" > <img src="" width="30px" height="30px"></p> <p><label for="password">密码: </label> <input type="password" id="password" οnblur="checkPassw1()"required> <img src="" width="30px" height="30px"></p> <p><label for="R_password">确认密码: </label> <input type="password" id="R_password" οnblur="checkPassw2()"required> <img src="" width="30px" height="30px"> <span id="biaoqian" style="position: absolute;"></span> </p> <p><label for="email">电子邮箱: </label> <input type="text" id="email" οnblur="checkEmail()"required> <img src="" width="30px" height="30px"></p> <p><input type="submit" value="Register" id="btn"></p> </form> </div> </div> </div>
三。js代码
<script> var ele = { //存放各个input字段obj form1:document.getElementById("form1"), name: document.getElementById("name"), password: document.getElementById("password"), R_password: document.getElementById("R_password"), email: document.getElementById("email"), imgs:document.getElementsByTagName("img"), bioaiqan:document.getElementById("bioaiqan"), btn:document.getElementById("btn") }; //验证name function checkName(){ var name=ele.name.value; if(name != ""){ // 不为空则正确,当然也可以ajax异步获取服务器判断用户名不重复则正确 ele.name.className="";//移除class ele.imgs[0].setAttribute("src","img/right.jpg"); //对应图标 ele.imgs[0].style.display = "inline"; //显示 return true; } else{ //name不符合 ele.name.className="borderRed";//添加class ele.imgs[0].setAttribute("src","img/wrong.jpg"); //对应图标 ele.imgs[0].style.display = "inline"; //显示 return false; } } //验证密码 function checkPassw1(){ var passw1=ele.password.value; if(passw1){ ele.password.className=""; ele.imgs[1].setAttribute("src","img/right.jpg"); ele.imgs[1].style.display = "inline"; } else{ ele.password.className="borderRed"; ele.imgs[1].setAttribute("src","img/wrong.jpg"); ele.imgs[1].style.display = "inline"; } } function checkPassw2(){ var passw1=ele.password.value; var passw2=ele.R_password.value; if(passw2){ if(passw1!=passw2) { ele.password.className="borderRed"; ele.imgs[2].setAttribute("src","img/wrong.jpg"); ele.imgs[2].style.display = "inline"; biaoqian.innerHTML='<strong class="tips_false">您两次输入的密码不一样</strong>'; return false; } else { ele.R_password.className=""; ele.imgs[2].setAttribute("src","img/right.jpg"); ele.imgs[2].style.display = "inline"; biaoqian.innerHTML=""; return true; } } } function checkEmail(){ var email=ele. email.value; //验证邮箱 var pattern = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; if(!pattern.test(email)){ //email格式不正确 ele.email.className="borderRed"; ele.imgs[3].setAttribute("src","img/wrong.jpg"); ele.imgs[3].style.display = "inline"; return false; } else{ //格式正确 ele.email.className=""; ele.imgs[3].setAttribute("src","img/right.jpg"); ele.imgs[3].style.display = "inline"; return true; } } //通过type="submit"方式提交表单时,浏览器会在请求发送给服务器之前触发submit事件,这样我们就有机会验证表单数据,如下: //html代码form标签中写<form οnsubmit="return check();" ...> //然后在js文件中定义好check()函数 function check(){ //表单提交则验证开始 if(checkName()&&checkPassw2()&&checkEmail()){ alert(" 注册成功"); //注册成功 return true; } else{ alert("请正确的填写完信息!"); return false; } } 另一种方式,给表单添加注册事件,来使用event.preventDefault(),方式来阻止表单默认行为 /* ele.form1.οnsubmit=function(event){ var event = event || window.event; if(checkName()&&checkPassw2()&&checkEmail()){ alert(" 注册成功"); //注册成功 return true; } else{ alert("请正确的填写完信息!"); if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } } } */ </script>
四。效果图:
若是信息填错:如下:
转载于:https://blog.51cto.com/xiyin001/1764012