Apps 脚本：html 文件中的数据验证

Question

我有一个 html 文件。它包含一个 JavaScript 函数和一个表单。该表单由 materializecss.com 的日期选择器和一些文本输入字段组成。每当用户用一些数据填写表单时，这些数据都会由 JavaScript 函数收集并发送到我的 Google 电子表格。一切正常。但现在我想在 JavaScript 代码中添加以下修改：

1. 数据验证1：检查用户是否填写了所有输入字段。
2. 数据验证2：如果所有字段都没有填写，则在表单底部以红色显示短信警告“All fields are required”。
3. 数据验证 3：让用户可以在最后一个字段（field id="platzhalter") 用户想要的方式（因此，with 或 without 在每个单词的开头使用大写字母）。

非常感谢您的帮助。

这是我要修改的 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>

Answer 1

要检查所有内容是否有价值，请检查.value，或者如果您需要最小长度，则只需添加.value.length > minLength

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

要向用户显示消息，当不需要所有字段时，只需在 html 中的任意位置添加一个 ID 为 messageToUser 的字段，然后执行以下操作：

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
}