Apps腳本：html檔案中的資料驗證

我有一個 html 檔案。它包含一個 JavaScript 函式和一個表單。該表單包含一個來自 materializecss.com 的日期選擇器和一些文本輸入欄位。每當用戶用一些資料填寫表單時，JavaScript 函式就會收集這些資料并將其發送到我的 Google 電子表格。一切正常。但現在我想對 JavaScript 代碼添加以下修改：

1. 資料驗證 1：檢查用戶是否已填寫所有輸入欄位。
2. 資料驗證2：如果所有欄位都沒有填寫，則在表格底部以紅色顯示短訊息警告“所有欄位都是必需的”。
3. 資料驗證 3：讓用戶可以按照用戶想要的方式在最后一個欄位（欄位 id="platzhalter"）中寫入單詞“Vormittag”或“Nachmittag”（因此，在開頭有或沒有大寫字母）每個字）。

非常感謝您的幫助。

這是我要修改的 JavaScript 代碼：

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>  
  <script>
  // Localize the materializecss.com calender, so that all months and days are displayed in German
        inter_de = {
        cancel: 'ABBRECHEN',
        done:    'BEST?TIGEN',
        previousMonth:    '?',
        nextMonth:    '?',
        months:         ['Januar','Februar','M?rz','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
        monthsShort:    ['Jan','Feb','M?rz','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'],
        weekdays:       ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
        weekdaysShort:  ['So','Mo','Di','Mi','Do','Fr','Sa'],

        weekdaysAbbrev:    ['S', 'M', 'D', 'M', 'D', 'F', 'S']
      };
// Initialize the materializecss.com calender
const Calender = document.querySelector('.datepicker');
M.Datepicker.init(Calender,{
    format:'dd.mm.yyyy',
    i18n:inter_de
});
    </script>

    <script>
  // Localize the materializecss.com form input fields, so that the detault content of each field is in German   collect the input of the user
    var unternehmeneBox=document.getElementById("unternehmen");
    var anredeBox=document.getElementById("anrede");
    var nachnameBox=document.getElementById("nachname");
    var rufnummerBox=document.getElementById("rufnummer");
    var emailadresseBox=document.getElementById("emailadresse");
    var datepickerBox=document.getElementById("datepicker");
    var platzhalterBox=document.getElementById("platzhalter");
    document.getElementById("btn").addEventListener("click",addRecord);
    function addRecord(){
      var data={
      unternehmen:unternehmeneBox.value,
      anrede:anredeBox.value,
      nachname:nachnameBox.value,
      rufnummer:rufnummerBox.value,
      emailadresse:emailadresseBox.value,
      datepicker:datepickerBox.value,
      platzhalter:platzhalterBox.value
    };
  
  // show the form again, after the user input/data have been sent.
  google.script.run.appenData(data);
  unternehmeneBox.value="";
  anredeBox.value="";
  nachnameBox.value="";
  rufnummerBox.value="";
  emailadresseBox.value="";
  datepickerBox.value="";
  platzhalterBox.value="";
  }
    </script>

uj5u.com熱心網友回復：

要檢查某些東西是否都有值，請檢查它.value，或者如果您需要最小長度，則只需添加.value.length > minLength

if( unternehmeneBox.value && anredeBox.value && etc… ){
 return true
}

要向用戶顯示訊息，當并非所有欄位都需要時，只需messageToUser在 html 中任何您想要的位置添加一個帶有 id 的欄位，然后執行以下操作：

const errorMsg = “All fields are required”
const msgColor = "red"
const msgToUser = document.getElementById("messageToUser")
msgToUser.value = errorMsg
msgToUser.style.color = msgColor

要檢查特定欄位的值，最好添加選項或選項串列，否則，如果必須鍵入它，請嘗試：

if( platzhalterBox.value.toLowerCase() == "nachmittag"
  || platzhalterBox.value.toLowerCase() == "vormittag"){

  // Correct, the value is one of the two valid options
}

標籤：谷歌应用程序脚本

上一篇：查詢(LINQ)運算式不能被翻譯EntityFrameworkCore

下一篇：在Google檔案中批量更新時出現內部錯誤