前辈们请跳过
前端入门学习第二天,对照W3C的文档写了简单的登录注册实现。
html和css,js分别负责网页的界面、样式、动作。其中html提供的标签配合CSS实现界面美化的功能,CSS3中加入了新的样式,HTML5中也加入了更加方便的控件选择。例如本次页面中的输入框中提示就是用新加入的placeholder实现。谷歌、火狐等浏览器都可以正常解析。
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">用户名:</label>
<input type="text" name="username" placeholder="请输入您的用户名" οnchange="chkname()" id="username" /><br />
<p id="tip"class="tip"></p>
</div>
<div class="form-group">
<label for="password">密 码:</label>
<input type="password" name="password" placeholder="请输入您的密码" οnchange="chkpassword()" id="password" /><br />
<p id="tip2"class="tip"></p>
</div>
<div class="form-group">
<label for="checkcode">验证码:</label>
<input type="text" name="checkcode" placeholder="验证码" οnchange="chkcode()" id="checkcode"/><br /><br />
</div>
<button type="button" οnclick="check()" >确认登录</button>
</form>
<p class="jump">没有账号?立即<a href="register.html">注册</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="*用户名须由字母数字下划线组成!";
// document.write("用户名须由字母数字下划线组成");
}else{
document.getElementById("tip").innerHTML="";
}
}
function chkpassword(){
str=document.getElementById("password").value;
if(str.length<8 && str){
document.getElementById("tip2").innerHTML="*密码不可以少于八位!";
}else{
document.getElementById("tip2").innerHTML="";
}
}
function chkcode(){
str = document.getElementById("checkcode").value;
if(!str){
alert("请输入验证码!");
}
}