if (document.login.usename.value== "logon" &&document.login.password.value =="logon") {
location.href="main.html"
//document.login.usename 跟document.login.password 中的login 要换成你的表单名称, //usename、password 要换成你 字段的名称。
}else{
return false
}
}
普通静态网页用户登录检测需要用到js脚本，用到的工具：notepad++，用户登录检测代码以及效果如下:
html代码部分：
<html><head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312"/>
<title>Untitled Document</title>
<script language="javascript">
function checkname(){
var div = document.getElementById("div1")
div.innerHTML = ""
var name1 = document.form1.text1.value
if (name1 == "") {
div.innerHTML = "姓名不能为空！"
document.form1.text1.focus()
return false
}
if (name1.length < 4 || name1.length > 16) {
div.innerHTML = "姓名输入的长度4-16个字符！"
document.form1.text1.select()
return false
}
var charname1 = name1.toLowerCase()
for (var i = 0 i < name1.length i++) {
var charname = charname1.charAt(i)
if (!(charname >= 0 && charname <= 9) && (!(charname >= 'a' && charname <= 'z')) && (charname != '_')) {
div.innerHTML = "姓名包含非法字母，只能包含字母，数字，和下划线"
document.form1.text1.select()
return false
}
}
return true
}
function checkpassword(){
var div = document.getElementById("div2")
div.innerHTML = ""
var password = document.form1.text2.value
if (password == "") {
div.innerHTML = "密码不位空！"
document.form1.text2.focus()
return false
}
if (password.length < 4 || password.length > 12) {
div.innerHTML = "密码长度4-12位"
document.form1.text2.select()
return false
}
return true
}
function checkrepassword(){
var div = document.getElementById("div3")
div.innerHTML = ""
var password = document.form1.text2.value
var repass = document.form1.text3.value
if (repass == "") {
div.innerHTML = "密码不位空！"
document.form1.text3.focus()
return false
}
if (password != repass) {
div.innerHTML = "输入密码和确认密码长度不一致"
document.form1.text3.select()
return false
}
return true
}
function check(){
if (checkname() && checkpassword() && checkrepassword()) {
return true
}
else {
return false
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="2.html" onsubmit="return check()">
<table>
<tr>
<td>
用户名：
</td>
<td>
<input id="text1" type="text" name="text1" onblur="check()">
<div id="div1" style="display:inline">
</div>
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input id="text2" type="password" name="text2" onblur="check()">
<div id="div2" style="display:inline">
</div>
</td>
</tr>
<tr>
<td>
确认密码：
</td>
<td>
<input id="text3" type="password" name="text3" onblur="check()">
<div id="div3" style="display:inline">
</div>
</td>
</tr>
<tr align="center">
<td align="center">
<input type="submit" value="登录" name="tect6"><input type="reset" value="重置" name="text7">
</td>
</tr>
</table>
</form>
</body>
</html>
2.浏览器打开的效果如下：
3.用户名没有输入的提示：
4.
注意事项：用户名和密码都不能为空，两次输入的密码必须一致，密码长度4-12位，用户名只能包含字母，数字，和下划线，长度4-16位。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）