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

Let's talk about Vue's mixin and inheritance in detail

Table of contents Preface Mixin Mixin Note (dupli...

Detailed explanation of Docker cross-host container communication overlay implementation process

There are also two servers: Preparation: Set the ...

Several magical uses of JS ES6 spread operator

Table of contents 1. Add attributes 2. Merge mult...

How to store text and pictures in MySQL

Large Text Data Types in Oracle Clob long text ty...

Implementation of mysql using mysqlbinlog command to restore accidentally deleted data

Experimental environment: MYSQL 5.7.22 Enable bin...

Specific use of ES6 array copy and fill methods copyWithin() and fill()

Table of contents Batch copy copyWithin() Fill ar...

Centos7 installation of Nginx integrated Lua sample code

Preface The computer I use is a Mac, and the oper...

Installing Alibaba Cloud Server with Docker and the pitfalls encountered in installing it in a virtual machine (summary of problems)

Docker installation (Alibaba Cloud Server) Docker...

A brief discussion on Nginx10m+ high concurrency kernel optimization

What is high concurrency? The default Linux kerne...

Detailed explanation of the concept, principle and usage of MySQL triggers

This article uses examples to explain the concept...

MySQL 8.0.21 installation and configuration method graphic tutorial

Record the installation and configuration method ...

Storage engine and log description based on MySQL (comprehensive explanation)

1.1 Introduction to storage engines 1.1.1 File sy...

web.config (IIS) and .htaccess (Apache) configuration

xml <?xml version="1.0" encoding=&qu...

Analysis of the reasons why MySQL field definitions should not use null

Why is NULL so often used? (1) Java's null Nu...

Enable OCSP to improve https certificate verification efficiency and solve the problem of slow access to Let's Encrypt SSL certificates

In the past few days, the website has been access...