html用戶註冊界面

時間 2019-11-11

標籤 html 用戶註冊界面欄目 HTML 简体版

原文原文鏈接

先上一張簡約的界面的效果圖ui

這裏是style裏面的內容spa

<style>
        input[type]{
            border: 1px solid darkorange;
            background: white;
        }
        #button{
            border: 10px solid orange;
            width: 200px;
            box-shadow:0px 4px 5px #666;
            background: orange;        
            color: white;    
        }
        
    </style>

再來body裏面的內容,這裏用到的是失焦 onblur 和聚焦 onfocuscode

<body>
<center>
<div>
<form>
<h3>用戶註冊</h3>
<hr>
<p>用戶名:<input type="text" id="name" placeholder="請填寫用戶名" required="required" onblur="name1()" "><br><span id="tel"></span></p>
<p>密碼:<input id="paswd" type="password" placeholder="請填寫密碼" onblur="pwd1()" required="required" onfocus="pwd2()"><br><span id="pw"></span></p>
<p>確認密碼:<input id="paswd2" type="password" placeholder="請確認密碼" required="required" onkeyup="validate()" ><br><span id="qpwtx"></span></p>
<p>郵箱:<input type="email" placeholder="請填寫郵箱" required="required"></p>
<p><input type="checkbox" required="required">我已閱讀註冊手冊</p>
<p><input type="submit" id="button" value="註冊"></p>
</form>
</div>
</center>
</body>orm

最後是js裏面的代碼blog

<script>
function name1(){
var name=document.getElementById("name").value;
if(name.length==""){
document.getElementById("tel").innerHTML="用戶名不能爲空"
document.getElementById("tel").style.color="red";
}else{
document.getElementById("tel").innerHTML="√"
document.getElementById("tel").style.color="green";
}
}
// function name2(){
// document.getElementById("tel").innerHTML="請填寫用戶名"
// document.getElementById("tel").style.color="#999";
// }
function pwd2(){
document.getElementById("pw").innerHTML="請填寫6-12位的密碼"
document.getElementById("pw").style.color="#999";

}
function pwd1(){
p=document.getElementById("paswd").value;

if(p.length>=6&&p.length<=20)
{
document.getElementById("pw").innerHTML="√"
document.getElementById("pw").style.color="green";
}else{
document.getElementById("pw").innerHTML="格式錯誤,請輸入6-20位"
document.getElementById("pw").style.color="red";
}
}
function validate(){
var qpw=document.getElementById("paswd").value;
var qpw2=document.getElementById("paswd2").value;

if(qpw==qpw2 && p.length>=6&&p.length<=20){
document.getElementById("qpwtx").innerHTML="<font color='green'>√</font>";
document.getElementById("button").disabled = false;
}
else {
document.getElementById("qpwtx").innerHTML="<font color='red'>兩次密碼不相同或者格式錯誤</font>";
document.getElementById("button").disabled = true;
}
}

</script>ip

你們若是有須要能夠借鑑一下，以爲還不錯的朋友們點擊一下推薦吧get

相關文章

相關標籤/搜索

用戶界面設計

Windows7註冊碼

PHP參考手冊

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<