一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;
}
二.html代码
注册系统
用户名:
密码:
确认密码:
电子邮箱:
三。js代码
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='您两次输入的密码不一样';
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标签中写
//然后在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;
}
}
} */
四。效果图:
,正确填完表单之后,点击注册,如下图:
注册成功,点击确定按钮后,表单进行提交。
若是信息填错:如下:
这时,点击注册按钮,或者回车响应,会有如下图:
点击确定按钮,表单不会提交,会让用户正确填完信息后再提交。