如何通过编程判断日期输入字段是否未完整提交，并区分两种返回null的场景？

Great questions! These are super common hurdles when dealing with date inputs, especially when you need granular control over what the user actually entered. Let's tackle each one:

1. How to Programmatically Check if a Date Field is Incomplete #

First, let's clarify what "incomplete" means here: the user hasn't filled out all required parts of the date (e.g., left the year as a placeholder, only entered day/month, etc.). The key here is to work with the raw input string instead of relying on the parsed Date object (since incomplete inputs will often parse to null anyway).

Assuming your expected date format is dd/mm/yyyy (with placeholders like gg/mm/aaaa), here's a Vue-friendly approach:

<template>
  <input v-model="rawDateInput" placeholder="gg/mm/aaaa" />
  <button @click="checkDateCompleteness">Check Completeness</button>
</template>

<script setup>
import { ref } from 'vue';

const rawDateInput = ref('');

const checkDateCompleteness = () => {
  // Split input into date components
  const [day, month, year] = rawDateInput.value.split('/');
  
  // Validate each component isn't a placeholder and is a valid number
  const isDayValid = day && !isNaN(parseInt(day)) && parseInt(day) >= 1 && parseInt(day) <= 31;
  const isMonthValid = month && !isNaN(parseInt(month)) && parseInt(month) >= 1 && parseInt(month) <= 12;
  const isYearValid = year && !isNaN(parseInt(year)) && year.length === 4;
  
  const isComplete = isDayValid && isMonthValid && isYearValid;
  
  if (!isComplete) {
    alert('Date is incomplete or uses placeholder values!');
    // Add your error handling here (e.g., highlight input, show inline error)
  } else {
    // Optional: Final check for valid date (handles edge cases like Feb 30)
    const parsedDate = new Date(`${month}/${day}/${year}`);
    if (!isNaN(parsedDate.getTime())) {
      console.log('Complete, valid date:', parsedDate);
    } else {
      alert('Date is complete but invalid (e.g., Feb 30)!');
    }
  }
};
</script>

Pro tip: For a cleaner check, use a regex to match the full valid format directly:

const validDateRegex = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[012])\/\d{4}$/;
const isComplete = validDateRegex.test(rawDateInput.value);

This regex ensures the input matches dd/mm/yyyy with valid day/month ranges, though you'll still want a Date parse check to catch impossible dates like April 31.

2. Differentiating Between Two Null Return Scenarios #

The problem here is that both invalid formats and placeholder inputs return null when parsed to a Date—but their raw input values are distinct. The solution is to check the raw input string first before attempting to parse:

Here's how to split the two scenarios in Vue:

<template>
  <form @submit.prevent="handleDateSubmission">
    <input v-model="rawDateInput" placeholder="gg/mm/aaaa" />
    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { ref } from 'vue';

const rawDateInput = ref('');
// Match your exact placeholder text
const placeholderRegex = /^gg\/mm\/aaaa$/;

const handleDateSubmission = () => {
  const input = rawDateInput.value.trim();
  
  // Scenario 1: User submitted placeholder or empty value
  if (input === '' || placeholderRegex.test(input)) {
    console.log('Case: Empty/placeholder submission');
    alert('Please fill in a valid date!');
    return;
  }
  
  // Attempt to parse the date
  const [day, month, year] = input.split('/');
  const parsedDate = new Date(`${month}/${day}/${year}`);
  
  // Scenario 2: User submitted invalid date format
  if (isNaN(parsedDate.getTime())) {
    console.log('Case: Invalid date format submitted');
    alert('That date format is invalid! Please use dd/mm/yyyy.');
  } else {
    // Valid date, proceed with submission
    console.log('Valid date submitted:', parsedDate);
  }
};
</script>

Key Takeaways: #

• Never ignore raw input: The parsed Date object alone can't tell you why it's null—always start with what the user actually typed.
• Customize the placeholder regex: Adjust it to match exactly what's shown in your input (e.g., dd/mm/yyyy instead of gg/mm/aaaa).
• Handle edge cases: Don't forget to trim whitespace and account for partial inputs like 12//2024 (these fall into the invalid format scenario, which is correct).

内容的提问来源于stack exchange，提问作者Diogenes