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