ログインと登録機能を実現するjs

この記事の例では、ログインと登録機能を実装するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

1. まず、phpstudy ファイルで「www」という名前のファイルを見つけて、その中に html、js、php ファイルを作成します。

2. Navicat ソフトウェアで phpstudy の MySQL に接続します。

3. Navicat ソフトウェアでデータベースを見つけてテーブルを作成します。

4. HTML コード (下の図 1 を参照) を記述して、簡単な登録フォーム構造を記述し、JS を通じてフォームを検証します。[登録] をクリックして PHP ファイルにジャンプします。

5. PHP コード (下の図 2 を参照) まず、HTML コードでフォームの値を取得し、フォーム内のデータを検索して判断します。ユーザーが存在する場合は、前の HTML ページに戻ります。ユーザー名が正常に設定されると、データは Navicat ソフトウェアで以前に作成されたテーブルに自動的に保存されます。保存後、ログインページに移動します。

6. ログインページに移動します (図 3 を参照)。ログインページに移動したら、以前に登録したユーザー名とパスワードを入力して確認します。確認プロセスでは、まずユーザー名が存在するかどうかを確認し、次にパスワードが正しいかどうかを確認します。ユーザー名が存在しない場合は、戻ってパスワードを再入力します。パスワードが間違っている場合は、パスワードの再入力を求められます。両方とも正しい場合は、ログイン PHP ファイルに移動します。

7. ログイン PHP ファイルに移動します (図 4 を参照)。ログイン名を取得してデータベースで検証します。検証に問題がある場合は、ポップアップウィンドウが表示されます。検証が成功すると、ユーザー名のコピーがブラウザーに保存されます。

8. ログインに成功したら、ホームページにアクセスすることができます。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
</head>
<本文>
    <フォームアクション="register.php" メソッド="POST">
        <テーブル>
            <caption>登録</caption>
            <tr>
                <td>ユーザー名:</td>
                <td><input type="text" name="ユーザー名"></td>
            </tr>
            <tr>
                <td>パスワード:</td>
                <td><input type="password" name="パスワード"></td>
            </tr>
            <tr>
                <td>パスワードの確認:</td>
                <td><input type="password" name="repass"></td>
            </tr>
            <tr>
                <td>携帯電話番号:</td>
                <td><input type="text" name="tel"></td>
            </tr>
            <tr>
                <td>メールアドレス:</td>
                <td><input type="text" name="メール"></td>
            </tr>
            <tr>
                <td><input type="submit" value="登録"></td>
            </tr>
        </テーブル>
    </フォーム>
</本文>
<スクリプト>
    var フォーム = document.querySelector('フォーム');
    var ユーザー名 = document.querySelector('[name="ユーザー名"]');
    var パスワード = document.querySelector('[name="パスワード"]');
    var repass = document.querySelector('[name="repass"]');
    var tel = document.querySelector('[name="tel"]');
    var email = document.querySelector('[name="email"]');
    var btn1 = document.querySelector('[type="submit"]');
    フォーム.onsubmit = 関数(){
        var reg = /^\w{4,12}$/;
        if(!reg.test(ユーザー名.値.trim())){
            alert('正しいユーザー名を入力してください');
            false を返します。
        }
        var reg = /^\d{6,16}$/;
        if(!reg.test(password.value.trim())){
            alert('正しいパスワードを入力してください');
            false を返します。
        }
        if(password.value.trim() !== repass.value.trim()){
            alert('パスワードが2回間違っています');
            false を返します。
        }
        var reg = /^1[3-9]\d{9}$/;
        if(!reg.test(tel.value.trim())){
            alert('電話番号を正しく入力してください');
            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('メールアドレスを正しく入力してください');
            false を返します。
        }
    }
</スクリプト>
</html>

<?php
// エンコード形式を修正します header("content-type:text/html;charset=utf8");
// ユーザー名の値を抽出します $username = $_POST['username'];
// パスワードの値を抽出します $password = $_POST['password'];
// telの値を抽出します $tel = $_POST['tel'];
// メールの値を抽出します $email = $_POST['email'];
// データベースに接続します $con = mysqli_connect("localhost","root","root","test");
// データベース内のユーザー名を検索します $res = mysqli_query($con,"select * from register where username='$username'");
// データベースのユーザー名を検索します $row = mysqli_fetch_assoc($res);
// ユーザー名が存在するか確認する if($row){
    echo ("<スクリプト>
    alert('ユーザー名はすでに使用されています');
    location.href='register.html';</script>");
}それ以外{
    // データベースにデータを追加します $res = mysqli_query($con,"insert register(username,password,tel,email) values('$username','$password',$tel,'$email')");
    // if($res){ を判断する
        echo ("<スクリプト>
        alert('登録が完了しました');
        location.href='land.html';</script>");
    }それ以外{
        echo ("<スクリプト>
        alert('登録に失敗しました。再登録してください');
        location.href='register.html';</script>");
    }
}

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
</head>
<本文>
    <フォームアクション="land.php" メソッド="POST">
        <テーブル>
            <caption>ログイン</caption>
            <tr>
                <td>ユーザー名:</td>
                <td><input type="text" name="ユーザー名"></td>
            </tr>
            <tr>
                <td>パスワード:</td>
                <td><input type="password" name="パスワード"></td>
            </tr>
            <tr>
                <td><input type="submit" value="ログイン"></td>
            </tr>
        </テーブル>
    </フォーム>
</本文>
<スクリプト>
    var フォーム = document.querySelector('フォーム');
    var ユーザー名 = document.querySelector('[name="ユーザー名"]');
    var パスワード = document.querySelector('[name="パスワード"]');
    var btn1 = document.querySelector('[type="submit"]');
    フォーム.onsubmit = 関数(){
        var reg = /^\w{4,12}$/;
        if(!reg.test(ユーザー名.値.trim())){
            alert('正しいユーザー名を入力してください');
            false を返します。
        }
        var reg = /^\d{6,16}$/;
        if(!reg.test(password.value.trim())){
            alert('正しいパスワードを入力してください');
            false を返します。
        }
    }
</スクリプト>
</html>

<?php
ヘッダー('content-type:text/html;charset=utf8');
$username = $_POST['ユーザー名'];
$password = $_POST['パスワード'];
 
$con = mysqli_connect("localhost","root","root","test");
 
$res = mysqli_query($con,"username = '$username' のレジスタから * を選択");
 
行をコピーします。
 
$row の場合
    if($row['パスワード'] === $パスワード){
        setcookie('ユーザー名',$ユーザー名);
        echo ("<スクリプト>
        alert('ログインに成功しました');
        location.href='comment.html';</script>");
    }それ以外{
        echo ("<スクリプト>
        alert('パスワードが間違っています');
        location.href='land.html';</script>");
    }
}それ以外{
    echo ("<スクリプト>
    alert('ユーザー名が存在しません');
    location.href='land.html';</script>");
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: