js实现时间日期校验

JS实现时间日期校验需要用到正则表达式，下面我将介绍实现这一过程的完整攻略。

步骤一：获取输入框的值

首先，我们需要获取输入框中用户输入的值，可以使用document.getElementById()方法获取对应输入框的元素对象，进而获取输入框中的值：

let inputDate = document.getElementById('date').value;

步骤二：定义校验规则

接下来，我们需要定义校验规则，以确保用户输入的日期格式正确。根据常见的日期格式，可以将日期格式分为几类，包括：

• 年月日（例如：2022-06-30）
• 年月日时分秒（例如：2022-06-30 12:23:34）
• 月日年（例如：06/30/2022）

针对上述日期格式，我们可以定义以下校验规则：

// 校验年月日日期格式
let reg1 = /^\d{4}-\d{1,2}-\d{1,2}$/;

// 校验年月日时分秒格式
let reg2 = /^\d{4}-\d{1,2}-\d{1,2} \d{1,2}:\d{1,2}:\d{1,2}$/;

// 校验月日年格式
let reg3 = /^\d{1,2}\/\d{1,2}\/\d{4}$/;

步骤三：进行校验并输出结果

最后，我们根据校验规则进行校验，并输出校验结果。校验可以使用正则表达式的test()方法进行判断，代码如下：

if(reg1.test(inputDate)) {
    console.log("日期格式正确，为年月日格式");
} else if(reg2.test(inputDate)) {
    console.log("日期格式正确，为年月日时分秒格式");
} else if(reg3.test(inputDate)) {
    console.log("日期格式正确，为月日年格式");
} else {
    console.log("日期格式错误，请重新输入");
}

以上便是JS实现时间日期校验的完整攻略，下面给出两个示例说明：

示例一

假设我们有一个表单，其中有一个id为date的输入框，用户需要输入一个日期，我们可以使用以下代码实现时间日期校验：

<form>
    <label for="date">输入日期：</label>
    <input type="text" id="date" name="date">
    <button type="button" onclick="checkDate()">校验</button>
</form>

function checkDate() {
    let inputDate = document.getElementById('date').value;
    // 校验年月日日期格式
    let reg1 = /^\d{4}-\d{1,2}-\d{1,2}$/;

    // 校验年月日时分秒格式
    let reg2 = /^\d{4}-\d{1,2}-\d{1,2} \d{1,2}:\d{1,2}:\d{1,2}$/;

    // 校验月日年格式
    let reg3 = /^\d{1,2}\/\d{1,2}\/\d{4}$/;

    if(reg1.test(inputDate)) {
        console.log("日期格式正确，为年月日格式");
    } else if(reg2.test(inputDate)) {
        console.log("日期格式正确，为年月日时分秒格式");
    } else if(reg3.test(inputDate)) {
        console.log("日期格式正确，为月日年格式");
    } else {
        console.log("日期格式错误，请重新输入");
    }
}

示例二

我们可以使用JS实现在页面中动态创建一个输入框，并且进行时间日期校验的功能。以下示例代码中，我们动态创建一个id为input-date的输入框，并在用户输入后自动进行校验并输出结果：

<div id="input-box"></div>
<button type="button" onclick="addInput()">添加输入框</button>

<script>
    function addInput() {
        let div = document.getElementById('input-box');
        div.innerHTML += '<input type="text" id="input-date" onchange="checkDate()">'
    }

    function checkDate() {
        let inputDate = document.getElementById('input-date').value;
        // 校验年月日日期格式
        let reg1 = /^\d{4}-\d{1,2}-\d{1,2}$/;

        // 校验年月日时分秒格式
        let reg2 = /^\d{4}-\d{1,2}-\d{1,2} \d{1,2}:\d{1,2}:\d{1,2}$/;

        // 校验月日年格式
        let reg3 = /^\d{1,2}\/\d{1,2}\/\d{4}$/;

        if(reg1.test(inputDate)) {
            console.log("日期格式正确，为年月日格式");
        } else if(reg2.test(inputDate)) {
            console.log("日期格式正确，为年月日时分秒格式");
        } else if(reg3.test(inputDate)) {
            console.log("日期格式正确，为月日年格式");
        } else {
            console.log("日期格式错误，请重新输入");
        }
    }
</script>