Home > Article > Web Front-end > Example sharing JavaScript login verification basic tutorial

Example sharing JavaScript login verification basic tutorial

小云云Original: 2017-12-28 11:31:582108browse

This article mainly introduces the basic tutorial of JavaScript login verification in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

The example in this article shares the specific code of js login verification for your reference. The specific content is as follows

1. Three usages of3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 ：

1. Put it in 6c04bd5ca3fcae76e30b72ad730ca86d

2. Put it in 93f0f5c25f18dab9d176bd4f6de5d30e

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>欢迎你，请先登陆！</title>
 <script type="text/javascript" src="../static/jsp/lx.js"></script>
 <script type="text/javascript">alert(&#39;这是javascript代码&#39;)</script>
</head>
<body>
<p id="demo">www</p>
<script>
 document.getElementById(&#39;demo&#39;).innerHTML = Date()
</script>
<p id="container" style="width: 400px" align="center">
 <p id="header" style="background-color: aquamarine">
  <h2 align="center">登陆</h2>
 </p>
 <p id="content">
  <form>
   <p align="center">账号:
    <input id="uname" type="tex" name="user" placeholder="请输入用户名">
   </p>
   <p align="center">密码:
    <input id="upass" type="password" name="psw">
   </p>
   <p id="error_box"><br></p>
   <br>
   <button onclick="fnLogin()">登陆</button>
   &nbsp&nbsp&nbsp
   <input type="button" name="regist" value="注册">
  </form>
 </p>
 <p style="background-color: aquamarine">
  <i>版权信息@</i>
 </p>
</p>
</body>
</html>

3. Place it in an external JS file

document.getElementById('demo').innerHTML = Date()

Run screenshot:

Three ways to output data:

1. Use the document.write() method to write the content into the HTML document.

2. Use window.alert() to pop up a warning box.

3. Use innerHTML to write to HTML elements.

1). Use the "id" attribute to identify HTML elements.

2). Use document.getElementById(id) method to access HTML elements.

3). Use innerHTML to obtain or insert element content.

The code is as follows

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>欢迎你，请先登陆！</title>
 <script type="text/javascript" src="../static/jsp/lx.js"></script>
 <script type="text/javascript">alert(&#39;这是javascript代码&#39;)</script>
</head>
<body>
<p id="demo">www</p>
<script>
 document.getElementById(&#39;demo&#39;).innerHTML = Date()
</script>
<button type="button" onclick=window.alert("number")>press</button>
</body>
</html>

Run screenshot:

3. Login page preparation:

1. Add an error prompt box.

2. Write the HTML+CSS file.

3. Set the id of each input element

4. Define JavaScript function.

1. Verify 6-20 digits of username

2. Verify 6-20 digits of password

5. Call this function on click.

The html code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>欢迎你，请先登陆！</title>
 <script type="text/javascript" src="../static/jsp/lx.js"></script>
 <link rel="stylesheet" type="text/css" href="../static/css/lx.css" rel="external nofollow" >
</head>
<body>
<p class="p" id="container">
 <p id="header" >
  <h2 class="h">登陆</h2>
 </p>
 <p id="content">
   <p class="p">账号:
    <input id="uname" type="text" placeholder="请输入用户名">
   </p>
   <p class="p">密码:
    <input id="upass" type="password" >
   </p>
   <p id="error_box"><br>
   </p>
   <button onclick="fnLogin()">登陆</button>
   &nbsp&nbsp&nbsp
   <input type="button" name="regist" value="注册">
 </p>
 <p>
  <i>版权信息@</i>
 </p>
</p>

</body>
</html>

The js file code is as follows:

function 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位字符"
 }

 if (oUpass.value.length > 20 || oUpass.value.length < 6) {
  oError.innerHTML = "请输入6-20位字符"
 }
}

The CSS code is as follows:

.p {
 border: 5px solid #cccccc;
 width: 400px;
 text-align: center;
}
.p{
 font-family:华文楷体 ;
}
.h{
 font-family: 华文楷体;
}

Running screenshot:

## Related recommendations:

Detailed explanation of simple login verification in Python

Implementation of JavaScript login verification code

The above is the detailed content of Example sharing JavaScript login verification basic tutorial. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of React-Native global multi-language switching tool library react-native-i18nNext article：Detailed explanation of React-Native global multi-language switching tool library react-native-i18n

See more

Example sharing JavaScript login verification basic tutorial

Related articles