Home > Developer > Web Develop
This article is only for forwarding, non-original, original http://www.cnblogs.com/ayu999/p/5743324.html
Please support the original
First, a simple interface.
This is the content of the style.
<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>The contents of the body, the onblur and focus onfocus are used here.
<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 > e-mail: <input type= "email" placeholder= "please fill in the mailbox" 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>
And finally the code inside JS.
<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 name2 () {
document.getElementById ("tel"). Innerhtml= "Please fill in the user name"
document.getElementById ("tel"). style.color= "#999";
//}
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>
Forwarding--html User Registration interface
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
