提升網頁表單驗證：從簡單檢查到全面優化

在網頁開發中，表單驗證是一個常見卻極為重要的任務。今天，我想和大家分享我最近在優化一個複雜表單驗證過程中的經驗和心得。

初始問題：日期驗證邏輯

一開始表單只是單純使用HTML中date的max跟min屬性來限制，結果使用者通報在蘋果手機的瀏覽器無法正常運作，經檢查發現該屬性不支援，所以有了在表單中添加日期驗證需求：

為了解決這個問題，整理了以下驗證需求：

計算最小允許的開始日期（現在日期加7天）。
檢查用戶輸入的開始日期是否符合要求。
如果日期無效，自動將其修正為最早允許的日期。

代碼如下：

const today = new Date();
const minStartDate = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000);

// 檢查開始日期
if (this.business.editdata.startDate) {
    const startDate = new Date(this.business.editdata.startDate);
    if (startDate < minStartDate) {
        alert('開始日期必須是現在日期加7天或之後');
        // 自動修正為最早允許的日期
        this.business.editdata.startDate = minStartDate.toISOString().split('T')[0];
        isValid = false;
    }
} else {
    alert('拍攝開始日期為必填項目');
    // 自動設置為最早允許的日期
    this.business.editdata.startDate = minStartDate.toISOString().split('T')[0];
    isValid = false;
}

// 檢查結束日期
if (this.business.editdata.endDate) {
    const endDate = new Date(this.business.editdata.endDate);
    const startDate = new Date(this.business.editdata.startDate);
    if (endDate < startDate) {
        alert('結束日期不得早於開始日期');
        // 自動修正為開始日期
        this.business.editdata.endDate = this.business.editdata.startDate;
        isValid = false;
    }
} else {
    alert('拍攝結束日期為必填項目');
    // 自動設置為開始日期
    this.business.editdata.endDate = this.business.editdata.startDate;
    isValid = false;
}

全面優化表單驗證

在解決了日期驗證的問題後，我們意識到整個表單驗證過程都可以進行優化。以下是我們全面優化後的 validateForm 函數：

validateForm() {
    let isValid = true;
    const today = new Date();
    const minStartDate = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000);

    const requiredFields = [
        { field: 'company', message: '公司名稱為必填項目' },
        { field: 'GUInumber', message: '公司統編為必填項目' },
        { field: 'representative', message: '法定代表人為必填項目' },
        { field: 'address', message: '公司地址為必填項目' },
        { field: 'applicant', message: '申請人姓名為必填項目' },
        { field: 'contact', message: '現場聯絡人為必填項目' }
    ];

    // 檢查必填欄位
    requiredFields.forEach(({ field, message }) => {
        if (!this.business.editdata[field]) {
            alert(message);
            isValid = false;
        }
    });

    // 檢查 Email 格式
    if (!this.business.editdata.aMail || !/\S+@\S+\.\S+/.test(this.business.editdata.aMail)) {
        alert('申請人Email為必填項目，並且需為有效的Email格式');
        isValid = false;
    }

    // 檢查手機號碼格式
    const phoneFields = [
        { field: 'aPhone', message: '申請人手機為必填項目，並且需為有效的手機號碼格式' },
        { field: 'cPhone', message: '現場聯絡人手機為必填項目，並且需為有效的手機號碼格式' }
    ];

    phoneFields.forEach(({ field, message }) => {
        if (!this.business.editdata[field] || !/^\d{10}$/.test(this.business.editdata[field])) {
            alert(message);
            isValid = false;
        }
    });

    // 檢查開始日期和結束日期（使用前面優化過的邏輯）

    // 檢查拍攝資訊
    if (this.mapdata.length < 1) {
        alert("請填寫「拍攝資訊」");
        isValid = false;
    }

    // 檢查工作人員名冊
    const hasStaffMember = this.business.dbStaffMember.some(staff => !staff.remove);
    if (this.business.editdata.staff.length < 1 && !hasStaffMember) {
        alert("請填寫「拍攝工作人員名冊」");
        isValid = false;
    }

    // 檢查企劃案文件
    const hasPlanningFile = this.business.dbFileSet.some(file => file.category === 'planning' && !file.remove);
    if (!hasPlanningFile && this.business.editdata.file_planning.length < 1) {
        alert("請上傳「企劃案(腳本)或拍攝計畫書」");
        isValid = false;
    }

    return isValid;
}