溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
一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" onsubmit="return check()"> <legend>注冊(cè)系統(tǒng)</legend> <p><label for="name">用戶名: </label> <input type="text" id="name" onblur="checkName()" > <img src="" width="30px" height="30px"></p> <p><label for="password">密碼: </label> <input type="password" id="password" onblur="checkPassw1()"required> <img src="" width="30px" height="30px"></p> <p><label for="R_password">確認(rèn)密碼: </label> <input type="password" id="R_password" onblur="checkPassw2()"required> <img src="" width="30px" height="30px"> <span id="biaoqian" ></span> </p> <p><label for="email">電子郵箱: </label> <input type="text" id="email" onblur="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 = { //存放各個(gè)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")
};
//驗(yàn)證name
function checkName(){
var name=ele.name.value;
if(name != ""){ // 不為空則正確，當(dāng)然也可以ajax異步獲取服務(wù)器判斷用戶名不重復(fù)則正確
ele.name.className="";//移除class
ele.imgs[0].setAttribute("src","img/right.jpg"); //對(duì)應(yīng)圖標(biāo)
ele.imgs[0].style.display = "inline"; //顯示
return true;
}
else{ //name不符合
ele.name.className="borderRed";//添加class
ele.imgs[0].setAttribute("src","img/wrong.jpg"); //對(duì)應(yīng)圖標(biāo)
ele.imgs[0].style.display = "inline"; //顯示
return false;
}
}
//驗(yàn)證密碼
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;
//驗(yàn)證郵箱
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"方式提交表單時(shí)，瀏覽器會(huì)在請(qǐng)求發(fā)送給服務(wù)器之前觸發(fā)submit事件，這樣我們就有機(jī)會(huì)驗(yàn)證表單數(shù)據(jù)，如下：
//html代碼form標(biāo)簽中寫<form onsubmit="return check();" ...>
//然后在js文件中定義好check()函數(shù)
function check(){ //表單提交則驗(yàn)證開始
if(checkName()&&checkPassw2()&&checkEmail()){
alert(" 注冊(cè)成功"); //注冊(cè)成功
return true;
}
else{
alert("請(qǐng)正確的填寫完信息！");
return false;
}
}
另一種方式，給表單添加注冊(cè)事件，來使用event.preventDefault()，方式來阻止表單默認(rèn)行為
/* ele.form1.onsubmit=function(event){
var event = event || window.event;
if(checkName()&&checkPassw2()&&checkEmail()){
alert(" 注冊(cè)成功"); //注冊(cè)成功
return true;
}
else{
alert("請(qǐng)正確的填寫完信息！");
if (event.preventDefault) {
event.preventDefault();
}
else {
event.returnValue = false;
}
}
} */
</script>四。效果圖：
，正確填完表單之后，點(diǎn)擊注冊(cè)，如下圖：
注冊(cè)成功，點(diǎn)擊確定按鈕后，表單進(jìn)行提交。
若是信息填錯(cuò)：如下：
這時(shí)，點(diǎn)擊注冊(cè)按鈕，或者回車響應(yīng)，會(huì)有如下圖：
點(diǎn)擊確定按鈕，表單不會(huì)提交，會(huì)讓用戶正確填完信息后再提交。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼