Predecessors, please skip
The second day of front-end introductory study , contrast W3C A simple login and registration implementation is written in the document .
html and css,js Responsible for the interface of the web page , style , action . among html Label fit provided CSS Realize the function of interface beautification ,CSS3 New styles have been added to ,HTML5 More convenient control selection is also added in . For example, the prompt in the input box on this page is newly added
placeholder realization . Google , Firefox and other browsers can parse normally .
login.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>login</title>
<link type="text/css" rel="stylesheet" href="css/login.css" />
</head>
<body>
<div class="top">
<a href="index.html" class="Wel">Welcome to login</a>
</div>
<span class="title"></span>
<div class="card">
<div class="img">
<img src="" />
</div>
<div class="card_body">
<form action="index.html" method="post">
<div class="form-group">
<label for="username"> user name :</label>
<input type="text" name="username"
placeholder=" Please enter your user name " οnchange="chkname()" id="username" /><br />
<p id="tip"class="tip"></p>
</div>
<div class="form-group">
<label
for="password"> dense code :</label>
<input type="password" name="password"
placeholder=" Please enter your password " οnchange="chkpassword()" id="password" /><br />
<p id="tip2"class="tip"></p>
</div>
<div class="form-group">
<label for="checkcode"> Verification Code :</label>
<input type="text" name="checkcode"
placeholder=" Verification Code " οnchange="chkcode()" id="checkcode"/><br /><br />
</div>
<button type="button" οnclick="check()" > Confirm login </button>
</form>
<p class="jump"> No account ? immediately <a href="register.html"> register </a></p>
</div>
</div>
<script src="js/login.js"></script>
</body>
</html>
login.js：
function chkname(){
str=document.getElementById("username").value;
if (!(/^\w+$/.test(str)) && str.length>0){
document.getElementById("tip").innerHTML="* User names must consist of alphanumeric underscores !";
// document.write(" User names must consist of alphanumeric underscores ");
}else{
document.getElementById("tip").innerHTML="";
}
}
function chkpassword(){
str=document.getElementById("password").value;
if(str.length<8 && str){
document.getElementById("tip2").innerHTML="* The password cannot be less than eight digits !";
}else{
document.getElementById("tip2").innerHTML="";
}
}
function chkcode(){
str = document.getElementById("checkcode").value;
if(!str){
alert(" Please enter the verification code !");
}
}
Technology