js to realize login and registration functions

js to realize login and registration functions

This article example shares the specific code of js to implement login and registration functions for your reference. The specific content is as follows

1. First, find a file named "www" in the phpstudy file and create html, js, and php files in it;

2. Connect to phpstudy's MySQL in Navicat software;

3. Find a database in Navicat software and create a table;

4. Write HTML code (as shown in Figure 1 below) to write a simple registration form structure and verify the form through JS; click Register to jump to the PHP file;

5. PHP code (as shown in Figure 2 below) First, get the value of the form in the HTML code and then search for the data in the form to make a judgment. If the user exists, jump back to the previous HTML page. After the user name is set successfully, the data will be automatically saved to the previously created table in the Navicat software. After saving, jump to the login page;

6. Jump to the login page (as shown in Figure 3); after entering the login page, you can enter the previously registered username and password for verification. The verification process is to first verify whether the username exists and then verify whether the password is correct; if the username does not exist, jump back to re-enter the password. If the password is incorrect, the user is prompted to re-enter the password; if both are correct, jump to the login php file;

7. Jump to the login PHP file (as shown in Figure 4); obtain the login name and verify it in the database; if there is any problem in the verification, a pop-up window will be displayed; if the verification is successful, a copy of the user name will be saved in the browser;

8. After successful login, you can jump to our homepage for access

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="register.php" method="POST">
        <table>
            <caption>Register</caption>
            <tr>
                <td>Username:</td>
                <td><input type="text" name="username"></td>
            </tr>
            <tr>
                <td>Password:</td>
                <td><input type="password" name="password"></td>
            </tr>
            <tr>
                <td>Confirm password:</td>
                <td><input type="password" name="repass"></td>
            </tr>
            <tr>
                <td>Mobile phone number:</td>
                <td><input type="text" name="tel"></td>
            </tr>
            <tr>
                <td>Email:</td>
                <td><input type="text" name="email"></td>
            </tr>
            <tr>
                <td><input type="submit" value="Register"></td>
            </tr>
        </table>
    </form>
</body>
<script>
    var form = document.querySelector('form');
    var username = document.querySelector('[name="username"]');
    var password = document.querySelector('[name="password"]');
    var repass = document.querySelector('[name="repass"]');
    var tel = document.querySelector('[name="tel"]');
    var email = document.querySelector('[name="email"]');
    var btn1 = document.querySelector('[type="submit"]');
    form.onsubmit = function(){
        var reg = /^\w{4,12}$/;
        if(!reg.test(username.value.trim())){
            alert('Please enter the correct username');
            return false;
        }
        var reg = /^\d{6,16}$/;
        if(!reg.test(password.value.trim())){
            alert('Please enter the correct password');
            return false;
        }
        if(password.value.trim() !== repass.value.trim()){
            alert('Incorrect password twice');
            return false;
        }
        var reg = /^1[3-9]\d{9}$/;
        if(!reg.test(tel.value.trim())){
            alert('Please enter your phone number correctly');
            return false;
        }
        var reg = /^([1-9]\d{4,10}@qq|[a-zA-Z]\w{5,17}@(163|126))\.com$/;
        if(!reg.test(email.value.trim())){
            alert('Please enter your email address correctly');
            return false;
        }
    }
</script>
</html>
<?php
// Revise the encoding format header("content-type:text/html;charset=utf8");
// Extract the value of username $username = $_POST['username'];
// Extract the value of password $password = $_POST['password'];
// Extract the value of tel $tel = $_POST['tel'];
// Extract the value of email $email = $_POST['email'];
// Connect to database $con = mysqli_connect("localhost","root","root","test");
// Find the username in the database $res = mysqli_query($con,"select * from register where username='$username'");
// Find a database username $row = mysqli_fetch_assoc($res);
// Check if the username exists if($row){
    echo ("<script>
    alert('Username is already taken');
    location.href='register.html';</script>");
}else{
    // Add data to the database $res = mysqli_query($con,"insert register(username,password,tel,email) values('$username','$password',$tel,'$email')");
    // Judge if($res){
        echo ("<script>
        alert('Registration successful');
        location.href='land.html';</script>");
    }else{
        echo ("<script>
        alert('Registration failed, please re-register');
        location.href='register.html';</script>");
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="land.php" method="POST">
        <table>
            <caption>Login</caption>
            <tr>
                <td>Username:</td>
                <td><input type="text" name="username"></td>
            </tr>
            <tr>
                <td>Password:</td>
                <td><input type="password" name="password"></td>
            </tr>
            <tr>
                <td><input type="submit" value="Login"></td>
            </tr>
        </table>
    </form>
</body>
<script>
    var form = document.querySelector('form');
    var username = document.querySelector('[name="username"]');
    var password = document.querySelector('[name="password"]');
    var btn1 = document.querySelector('[type="submit"]');
    form.onsubmit = function(){
        var reg = /^\w{4,12}$/;
        if(!reg.test(username.value.trim())){
            alert('Please enter the correct username');
            return false;
        }
        var reg = /^\d{6,16}$/;
        if(!reg.test(password.value.trim())){
            alert('Please enter the correct password');
            return false;
        }
    }
</script>
</html>
<?php
header('content-type:text/html;charset=utf8');
$username = $_POST['username'];
$password = $_POST['password'];
 
$con = mysqli_connect("localhost","root","root","test");
 
$res = mysqli_query($con,"select * from register where username = '$username'");
 
$row = mysqli_fetch_assoc($res);
 
if($row){
    if($row['password'] === $password){
        setcookie('username',$username);
        echo ("<script>
        alert('Login successful');
        location.href='comment.html';</script>");
    }else{
        echo ("<script>
        alert('Wrong password');
        location.href='land.html';</script>");
    }
}else{
    echo ("<script>
    alert('Username does not exist');
    location.href='land.html';</script>");
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • js simply implements the verification code of user registration information
  • Common javascript codes for user registration
  • JS implements the function of obtaining SMS verification code and countdown when users register
  • PHP user registration page uses js to perform form verification specific example
  • JS code used to determine the password strength when the user registers
  • Use beans and servlets in jsp to implement user registration and login
  • A simple example of javascript user registration prompt effect
  • How to quickly build Node.js (Express) user registration, login and authorization methods
  • Nodejs implements user registration function
  • js implements the countdown method of user registration agreement

<<:  MySQL chooses the right storage engine

>>:  Analysis of the principles and usage of Docker container data volumes

Recommend

Mini Program to implement Token generation and verification

Table of contents process Demo Mini Program Backe...

Practical record of optimizing MySQL tables with tens of millions of data

Preface Let me explain here first. Many people on...

How to view MySQL links and kill abnormal links

Preface: During database operation and maintenanc...

Example of how to change the domestic source in Ubuntu 18.04

Ubuntu's own source is from China, so the dow...

27 Linux document editing commands worth collecting

Linux col command The Linux col command is used t...

jQuery Ajax chatbot implementation case study

Chatbots can save a lot of manual work and can be...

Vue recursively implements custom tree components

This article shares the specific code of Vue recu...

HTML optimization techniques you must know

To improve the performance of web pages, many dev...

HTTP header information interpretation and analysis (detailed summary)

HTTP Header Explanation 1. Accept: Tells the web s...

Summary of commonly used tags in HTML (must read)

Content Detail Tags: <h1>~<h6>Title T...

C# implements MySQL command line backup and recovery

There are many tools available for backing up MyS...

Vue3+TypeScript implements a complete example of a recursive menu component

Table of contents Preface need accomplish First R...

How to use explain to query SQL execution plan in MySql

The explain command is the primary way to see how...

Detailed explanation of the use of Linux time command

1. Command Introduction time is used to count the...

Summary of Problems in Installation and Usage of MySQL 5.7.19 Winx64 ZIP Archive

Today I learned to install MySQL, and some proble...