js realizes login and registration function

  • 2021-11-24 00:43:06
  • OfStack

This article example for everyone to share the js landing and registration function of the specific code, for your reference, the specific content is as follows

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

2. MySQL connected to phpstudy in Navicat software;

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

4. Write html code (Figure 1 below). Write a simple registration form structure and verify it through js; Click Register to jump to php file;

5. php code (Figure 2 below) first obtains the value of the form in html code and then looks up the data of the form to judge. 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 form in Navicat software, and then jump to the landing page after saving;

6. Jump to the landing page (as shown in Figure 3); After entering the landing page, you can enter the user name and password registered before for verification. The verification process is to verify whether the user name exists first and then verify whether the password is correct; The user name does not exist, jump back and re-enter the password incorrectly, and ask the user to re-enter the password; Jump to the login php file after all are correct;

7. Jump to the logged-in php file (as shown in Figure 4); Obtain the login name to the database for verification; Verify that there is a problem and give a pop-up prompt; If the verification is successful, save 1 copy of the user name to the browser;

8. After landing successfully, 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> Registration </caption>
            <tr>
                <td> User name: </td>
                <td><input type="text" name="username"></td>
            </tr>
            <tr>
                <td> Password: </td>
                <td><input type="password" name="password"></td>
            </tr>
            <tr>
                <td> Confirmation 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> Mailbox: </td>
                <td><input type="text" name="email"></td>
            </tr>
            <tr>
                <td><input type="submit" value=" Registration "></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 user name correctly ');
            return false;
        }
        var reg = /^\d{6,16}$/;
        if(!reg.test(password.value.trim())){
            alert(' Please enter the password correctly ');
            return false;
        }
        if(password.value.trim() !== repass.value.trim()){
            alert(' Incorrect password entry twice ');
            return false;
        }
        var reg = /^1[3-9]\d{9}$/;
        if(!reg.test(tel.value.trim())){
            alert(' Please enter the mobile 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 the mailbox correctly ');
            return false;
        }
    }
</script>
</html>

<?php
//  Revise the coding format 
header("content-type:text/html;charset=utf8");
//  Extraction username Value of 
$username = $_POST['username'];
//  Extraction password Value of 
$password = $_POST['password'];
//  Extraction tel Value of 
$tel = $_POST['tel'];
//  Extraction email Value of 
$email = $_POST['email'];
//  Connect to a database 
$con = mysqli_connect("localhost","root","root","test");
//  Find the user name in the database 
$res = mysqli_query($con,"select * from register where username='$username'");
//  Find 1 The user name of the database 
$row = mysqli_fetch_assoc($res);
//  Determining whether the user name exists 
if($row){
    echo ("<script>
    alert(' User name is already occupied ');
    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(' Successful registration ');
        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> Landing </caption>
            <tr>
                <td> User name: </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=" Landing "></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 user name correctly ');
            return false;
        }
        var reg = /^\d{6,16}$/;
        if(!reg.test(password.value.trim())){
            alert(' Please enter the password correctly ');
            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(' Successful login ');
        location.href='comment.html';</script>");
    }else{
        echo ("<script>
        alert(' Password error ');
        location.href='land.html';</script>");
    }
}else{
    echo ("<script>
    alert(' User name does not exist ');
    location.href='land.html';</script>");
}

Related articles: