JavaScript 基础，登录前端验证
Posted loe05
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 基础，登录前端验证相关的知识，希望对你有一定的参考价值。
1.<script></script>的三种用法：
放在<body>中
放在<head>中
放在外部JS文件中
三种输出数据的方式：
使用 document.write() 方法将内容写到 html 文档中。
使用 window.alert() 弹出警告框。
使用 innerHTML 写入到 HTML 元素。
使用 "id" 属性来标识 HTML 元素。
使用 document.getElementById(id) 方法访问 HTML 元素。
用innerHTML 来获取或插入元素内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pagefive</title> </head> <body style="text-align: center;"> <div style="border:1px dashed lightsalmon;width:410px;margin:0 auto"> <h4>显示当前时间</h4> <p id="demo"></p> </div> <p></p> <script> document.write("Hello!") document.getElementById("demo").innerHTML=Date(); </script> <p></p> <button type="button" onclick=window.alert("该用户不存在！")>Login</button> </body> </html>
登录页面准备：
增加错误提示框。
写好HTML+CSS文件。
设置每个输入元素的id
定义javascript 函数。
验证用户名6-20位
验证密码6-20位
onclick调用这个函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆页面</title>
<link rel="stylesheet" type="text/css" href="../static/222.css">
<script>
function myLogin() {
var oUname = document.getElementById("name");
var oError = document.getElementById("error_box");
var opassword = document.getElementById("password");
oError.innerHTML="<br>"
if(oUname.value.length<6 || oUname.value.length>20){
oError.innerHTML="name:6-20";
return;
}else if ((oUname.value.charCodeAt(0)>=48)&&oUname.value.charCodeAt(0)<=57){
oError.innerHTML="first number";
return;
}else for (var i=0; i<oUname.value.length;i++){
if((oUname.value.charCodeAt(i)<48||oUname.value.charCodeAt(i)>57)){
oError.innerHTML="only lotter or number";
return;
}
}
if(opassword.value.length>20 ||opassword.value.length<6{
oError.innerHTML = "password:6-20";
return;
}
window.alert("登录成功！")
}
</script>
</head>
<body>
<div class="one" >
<div class="jar" ><h2>登录页面</h2></div>
<div class="input_box" >
用户名：<input id="name" type="text" placeholder="请输入用户名"><br>
密码：<input id="password" type="password" placeholder="请输入密码"><br>
</div>
<div id="error_box"><br></div>
<div class="anniu" >
<button onclick="myLogin()">登录</button>
<button type="button" onclick=window.alert("是否取消登录？")>取消</button>
</div>
<h2>版权</h2>
</div>
</body>
</html>
div{
margin:0 auto;
text-align:center;}
h2{ text-align: center;margin-bottom:0;background-color:pink;}
.one{
width:500px;
height:200px;
border-width:1px;
margin-top:100px;
}
.input_box{
font-size:18px;
}
.anniu{
width:100px;
height:30px;
}
以上是关于JavaScript 基础，登录前端验证的主要内容，如果未能解决你的问题，请参考以下文章