标签：head div let return element contain highlight onclick ref
登录html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>登录</title>
<link rel="stylesheet" type="text/css" href="../static/css/jm.css">
<script src="../static/js/jm.js"></script>
</head>
<body>
<div class="box">
<div id="title">LoginText</div>
<h3>登录</h3>
<div class="input-box">
账号：<input id="uname" type="text" placeholder="请输入用户名">
</div>
<div class="input-box">
密码：<input id="upass" type="password" placeholder="请输入密码">
</div>
<div id="error-box"><br></div>
<div class="input-box">
<button onclick="fnLogin()">登录</button>
<a href="">注册/Resister</a>
</div>
</div>
</body>
</html>
js
unction fnLogin() {
var oUname = document.getElementById("uname")
var oUpass = document.getElementById("upass")
var oError = document.getElementById("error_box")
if (oUname.value.length > 20 || oUname.value.length < 6) {
oError.innerHTML = "请输入用户名6-20位字符":
return;
}else if(oUname.value.charCodeAt(0)>=48 && oUname.value.charCodeAt(0)<=57) {
oError.innerHTML = "first letter":
return;
}else for (var i=0; i<oUname.value.length;i++){
i<oUname.value.charCodeAt(i)<48 || oUname.value.charCodeAt(i)>57 && (oUname.value.charCodeAt(i)<97) || (oUname.value.charCodeAt(i)>122){
oError.innerHTML = "only letter or letter":
return;
}
}
if (oUpass.value.length > 20 || oUpass.value.length < 6) {
oError.innerHTML = "请输入密码 6-20位字符":
return;
}
window alert(‘登录成功！‘)
}
css
<p id="meto">中国标准时间</p>
<script>document.getElementById("meto").innerHTML = Date()</script>
<div id="container" style="width: 300px">
<div id="header" style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">><h2 align="center">登陆界面</h2></div>
<div id="footer" style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">><h3 align="center">版权所有@</h3></div>
运行结果
注册html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>注册</title>
<link rel="stylesheet" type="text/css" href="../static/css/register.css">
<script src="../static/js/register.js"></script>
</head>
<body>
<div class="box">
<div id="title">LoginText</div>
<h3>注册</h3>
<div class="input-box">
用户名称：<input id="uname" type="text" placeholder="请输入用户名">
</div>
<div class="input-box">
用户密码：<input id="upass" type="password" placeholder="请输入密码">
</div>
<div class="input-box">
确认密码：<input id="upass2" type="password" placeholder="请再次输入密码">
</div>
<div id="error-box"><br></div>
<div class="input-box">
<button onclick="fnLogin()">注册</button>
</div>
</div>
</body>
</html>
js
function fnLogin() {
var Uname = document.getElementById("uname").value;
var Upass = document.getElementById("upass").value;
var Upass2=document.getElementById("upass2").value;
var Error = document.getElementById("error_box").value;
Error.innerHTML="<br>"
if (Uname.value.length > 20 || Uname.value.length < 6) {
Error.innerHTML = "请输入用户名6-20位字符"
return;
}else if(Uname.value.charCodeAt(0)>=48 && Uname.value.charCodeAt(0)<=57) {
Error.innerHTML = "用户名首字符必须是字母"
return;
}else for (var i=0; i<oUname.value.length;i++){
i<Uname.value.charCodeAt(i)<48 || Uname.value.charCodeAt(i)>57 && (Uname.value.charCodeAt(i)<97) || (Uname.value.charCodeAt(i)>122){
Error.innerHTML = "用户名必须为字母或数字";
return;
}
}
if (Upass.value.length > 20 || Upass.value.length < 6) {
Error.innerHTML = "请输入密码 6-20位字符"
return;
}
else if (Upass!=Upass2){
document.getElementById("error_box").Error.innerHTML="两次密码不一致";
return;
}
window.alert("注册成功")
}
css
<div id = "login">
<p>用户名称：
<input type="text" name="username" value="" id="username"
maxlength="30" size="30" style="width:20%" /></p>
<p>用户密码：
<input type="password" name="password" value="" id="password"
maxlength="30" size="30" style="width:20%" /></p>
<p>确认密码：
<input type="password" name="password_check" value=""
id="password_check" maxlength="30" size="30" style="width:20%" onblur="check()" />
<span id="warning"> </span>
</p>
运行结果
标签：head div let return element contain highlight onclick ref
原文地址：http://www.cnblogs.com/Betty18/p/7768357.html
