MySQL と JavaScript を使用して簡単なデータ検証関数を実装する方法

MySQL と JavaScript を使用して簡単なデータ検証関数を実装する方法

Web 開発では、データ検証は非常に重要かつ不可欠なステップです。ユーザーが入力したデータが特定のルールと形式に準拠していることを保証し、ユーザー エクスペリエンスを向上させ、データベースの整合性も保護します。この記事では、MySQL と JavaScript を使用して簡単なデータ検証機能を実装する方法と、具体的なコード例を紹介します。

1. データ テーブルの作成

まず、ユーザーが送信したデータを保存するためのデータ テーブルを MySQL に作成します。名前、年齢、電子メールの 3 つのフィールドを含む「users」という名前のデータ テーブルを作成するとします。

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(50) NOT NULL,
    age INT NOT NULL,
    email VARCHAR(100) NOT NULL
);

2. フロントエンド フォームの作成

次に、ユーザー入力情報を収集するためのフォームをフロントエンド ページに作成します。フォームは HTML と JavaScript を使用して実装できます。以下は簡単なフォームの例です。

<form id="userForm">
    <label for="nameInput">姓名：</label>
    <input type="text" id="nameInput" required>
    
    <label for="ageInput">年龄：</label>
    <input type="number" id="ageInput" required>
    
    <label for="emailInput">电子邮件：</label>
    <input type="email" id="emailInput" required>

    <button type="submit">提交</button>
</form>

3. JavaScript コードの記述

次に、JavaScript でコードを記述して、データ検証のロジックを実装します。正規表現を使用すると、ユーザーが入力したデータが特定のルールに準拠しているかどうかを確認できます。以下は簡単なサンプル コードです。

// 获取表单元素
const userForm = document.getElementById('userForm');
const nameInput = document.getElementById('nameInput');
const ageInput = document.getElementById('ageInput');
const emailInput = document.getElementById('emailInput');

// 表单提交事件处理函数
userForm.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    // 获取用户输入的数据
    const name = nameInput.value;
    const age = parseInt(ageInput.value);
    const email = emailInput.value;

    // 数据验证
    if (!/^[A-Za-zs]+$/.test(name)) {
        alert('姓名只能包含字母和空格！');
        return;
    }

    if (age <= 0 || age > 150 || isNaN(age)) {
        alert('年龄必须为介于1至150之间的数字！');
        return;
    }

    if (!/^w+@w+.w+$/.test(email)) {
        alert('电子邮件格式不正确！');
        return;
    }

    // 数据提交到数据库
    // 此处可以使用Ajax或其他方式将数据提交到后端进行处理，这里只做简单示范
    // 假设有一个saveUser函数用于将数据保存到数据库
    saveUser(name, age, email);
});

// 保存用户数据到数据库函数
function saveUser(name, age, email) {
    // 发送Ajax请求或使用其他方法将数据保存到数据库
    // 假设有一个saveUser.php文件用于保存数据
    const data = {
        name: name,
        age: age,
        email: email
    };

    // 发送Ajax请求
    // ...

    alert('数据保存成功！');
}

4. バックエンド データ処理

最後に、受信したデータをバックエンドで処理する必要があります。 PHP を例に挙げると、単純なインターフェイス ファイル saveUser.php を作成して、ユーザー データをデータベースに保存できます。以下は基本的なサンプル コードです。

<?php
$name = $_POST['name'];
$age = $_POST['age'];
$email = $_POST['email'];

// 进行数据验证
// ...

// 将数据保存到数据库
// ...

// 返回响应
$message = '数据保存成功！';
echo json_encode(['message' => $message]);
?>

ここまでで、MySQL と JavaScript を使用して単純なデータ検証関数を実装する手順を完了し、具体的なコード例を示しました。このようにして、ユーザーが送信したデータが必要なルールと形式に準拠していることを確認し、データの整合性と正確性を確保できます。もちろん、実際の状況はさらに複雑である可能性がありますが、この例はさらなる拡張と最適化のための出発点として使用できます。この記事がお役に立てば幸いです!

以上がMySQL と JavaScript を使用して簡単なデータ検証関数を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。