如何在App Maker员工问卷文本框添加IBAN校验及引入iban.js库？

Absolutely, you can integrate a library like iban.js into Google App Maker to add IBAN validation to your employee survey's text box. Let's walk through exactly how to do this, step by step:

Yes, App Maker supports adding custom JavaScript libraries to your project. Instead of linking directly to external URLs (which can introduce loading issues or cross-domain concerns), you'll want to embed the core code of iban.js directly into your app's client-side scripts. This keeps everything self-contained and reliable.

1. Grab the core validation logic from iban.js (focus on the isValid method, which is all you need for basic IBAN checks).
2. In App Maker, open the Script Editor from the left-hand navigation menu (under "Scripts").
3. Create a new client-side script (name it something like IBANValidationLib to keep it organized).
4. Paste the extracted iban.js validation code into this script. The key function you'll need looks something like this (simplified for clarity):

   const IBAN = {
     isValid: function(iban) {
       // Core IBAN validation logic
       iban = iban.replace(/\s/g, '').toUpperCase();
       if (!/^[A-Z]{2}\d{2}[A-Z\d]{1,30}$/.test(iban)) return false;
       const rearranged = iban.substring(4) + iban.substring(0,4);
       const digits = rearranged.split('').map(c => isNaN(c) ? c.charCodeAt(0) - 55 : parseInt(c)).join('');
       let remainder = 0;
       for (let i = 0; i < digits.length; i++) {
         remainder = (remainder * 10 + parseInt(digits[i])) % 97;
       }
       return remainder === 1;
     }
   };
   

Now wire up the validation to your survey's text box:

1. Navigate to the text box component in your App Maker UI editor.
2. Open its Events panel (look for the event icon in the property editor).
3. Choose an event to trigger validation—onBlur (when the user clicks away from the box) or onChange (as the user types) work well.
4. Attach a custom function to the event, like this:

   function checkIBANValidity(widget) {
     const inputValue = widget.value.trim();
     if (!inputValue) {
       widget.errorText = ""; // Clear error if empty (adjust if IBAN is required)
       return;
     }
     const isValidIBAN = IBAN.isValid(inputValue);
     if (!isValidIBAN) {
       widget.errorText = "Please enter a valid IBAN number.";
       // If the text box is part of a form, mark the form as invalid
       if (widget.form) {
         widget.form.isValid = false;
       }
     } else {
       widget.errorText = "";
       if (widget.form) {
         widget.form.isValid = true;
       }
     }
   }
   

5. (Optional) Add a final check on form submission to ensure the IBAN is valid before sending data:

   function validateSurveyForm(form) {
     const ibanWidget = form.widgets.EmployeeIBAN; // Replace with your widget's ID
     const isValid = IBAN.isValid(ibanWidget.value);
     if (!isValid) {
       ibanWidget.errorText = "A valid IBAN is required to submit the survey.";
       return false; // Block form submission
     }
     return true; // Allow submission
   }
   

   Attach this function to your form's onSubmit event.

• Always clean the input (remove spaces, normalize to uppercase) before validation—IBANs are often entered with spaces for readability, and the validation logic works best with a standardized format.
• Test with real-world IBAN examples from different countries to make sure the validation works as expected.
• If your survey requires IBAN as a mandatory field, add a check for empty input alongside the format validation.

内容的提问来源于stack exchange，提问作者Johan W.