JS Implementation Login Interface

Code share:

<!doctype html>

<meta charset= "UTF-8" >
<title>Document</title>
<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>
<center>
<div>
<form>

<p> Username: <input type= "text" id= "name" placeholder= "please fill in User name" required= "required" onblur= "name1 ()" <!-- Onfocus= "name2 ()--" ><br><span id= "Tel" ></span></p>
<p> Password: <input id= "paswd" type= "password" placeholder= "please fill in the password" onblur= "Pwd1 ()" required= "Required" onfocus= " PWD2 () "><br><span id=" PW "></span></p>
<p> Confirm Password: <input id= "paswd2" type= "password" placeholder= "Please Confirm password" required= "required" onkeyup= "Validate ()" ><br><span id= "QPWTX" ></span></p>
<p> Email: <input type= "email" placeholder= "please fill in the email" required= "required" ></p>
<p><input type= "checkbox" required= "required" > I have read the registration manual </p>
<p><input type= "Submit" id= "button" value= "register" ></p>
</form>
</div>
</center>
</body>
<script>
function name1 () {
var Name=document.getelementbyid ("name"). Value;
if (name.length== "") {
document.getElementById ("tel"). innerhtml= "User name cannot be empty"
document.getElementById ("tel"). style.color= "Red";
}else{
document.getElementById ("tel"). Innerhtml= "√"
document.getElementById ("tel"). style.color= "Green";
}
}
function Pwd2 () {
document.getElementById ("PW"). Innerhtml= "Please fill in the 6-12-digit password"
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= "Format error, please enter 6-20-bit"
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 ' > two times password is not the same or format error </font>";
document.getElementById ("button"). Disabled = true;
}
}
</script>

Effect:

JS Implementation Login Interface