js 日期校验控件

在JavaScript中实现日期校验控件，通常涉及到以下几个方面：

基础概念

日期格式：常见的日期格式有YYYY-MM-DD、MM/DD/YYYY等。
正则表达式：用于匹配特定格式的日期字符串。
日期对象：JavaScript中的Date对象用于处理日期和时间。

类型

前端校验：在用户输入时即时校验。
后端校验：在数据提交到服务器后进行校验。

应用场景

表单提交：用户注册、信息更新等场景中的日期字段。
数据导入：批量导入数据时的日期格式校验。

实现方法

前端校验示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date Validation</title>
    <style>
        .error { color: red; }
    </style>
</head>
<body>
    <form id="dateForm">
        <label for="date">Date (YYYY-MM-DD):</label>
        <input type="text" id="date" name="date">
        <span id="error" class="error"></span>
        <br><br>
        <button type="submit">Submit</button>
    </form>

    <script>
        document.getElementById('dateForm').addEventListener('submit', function(event) {
            const dateInput = document.getElementById('date').value;
            const errorSpan = document.getElementById('error');
            errorSpan.textContent = ''; // Clear previous error messages

            const datePattern = /^\d{4}-\d{2}-\d{2}$/;
            if (!datePattern.test(dateInput)) {
                errorSpan.textContent = 'Invalid date format. Please use YYYY-MM-DD.';
                event.preventDefault(); // Prevent form submission
                return;
            }

            const dateParts = dateInput.split('-');
            const year = parseInt(dateParts[0], 10);
            const month = parseInt(dateParts[1], 10);
            const day = parseInt(dateParts[2], 10);

            const date = new Date(year, month - 1, day);
            if (date.getFullYear() !== year || date.getMonth() + 1 !== month || date.getDate() !== day) {
                errorSpan.textContent = 'Invalid date.';
                event.preventDefault();
            }
        });
    </script>
</body>
</html>

后端校验示例（Node.js）

const express = require('express');
const app = express();
app.use(express.json());

app.post('/submit-date', (req, res) => {
    const dateInput = req.body.date;
    const datePattern = /^\d{4}-\d{2}-\d{2}$/;
    if (!datePattern.test(dateInput)) {
        return res.status(400).send('Invalid date format. Please use YYYY-MM-DD.');
    }

    const dateParts = dateInput.split('-');
    const year = parseInt(dateParts[0], 10);
    const month = parseInt(dateParts[1], 10);
    const day = parseInt(dateParts[2], 10);

    const date = new Date(year, month - 1, day);
    if (date.getFullYear() !== year || date.getMonth() + 1 !== month || date.getDate() !== day) {
        return res.status(400).send('Invalid date.');
    }

    // Proceed with further processing
    res.send('Date is valid!');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});