如何一次性检查多类型变量的真值性以确保表单字段全部填写完整

Great question! The core issue here is that both of your current solutions use a one-size-fits-all approach to truthiness, which fails for cases like boolean false (a valid filled value if it's a user's active choice) or numeric 0 (also a valid input). Let's break down a clean, scalable solution that handles different data types appropriately.

Step 1: Define a Type-Specific Validation Function #

First, create a helper function that checks if a field is "filled" based on its type. You can tweak these rules to match your exact form requirements:

function isFieldFilled(value) {
  // Immediately flag null/undefined as unfilled
  if (value === null || value === undefined) return false;

  // Boolean values: false is a valid user choice, so it counts as filled
  if (typeof value === 'boolean') return true;

  // Strings: Require non-empty (trimmed to avoid whitespace-only inputs)
  if (typeof value === 'string') return value.trim().length > 0;

  // Numbers: Allow 0 (e.g., age input), only exclude NaN
  if (typeof value === 'number') return !isNaN(value);

  // Arrays: Require at least one element (remove `.length > 0` if empty arrays are valid)
  if (Array.isArray(value)) return value.length > 0;

  // Objects: Treat any non-null object as filled (add `Object.keys(value).length > 0` if empty objects are invalid)
  if (typeof value === 'object') return true;

  // Fallback: Treat any other type (e.g., functions) as filled
  return true;
}

Step 2: Batch Validate Your Variables #

Now, collect your variables into an array (or use Object.values() if they're stored in a form object) and validate them in one go with every():

Scenario 1: Standalone Variables #

const a1 = true, a2 = "str", a3 = { b: true }, a4 = [], a5 = "";

// Collect variables and validate
const requiredFields = [a1, a2, a3, a4, a5];
if (!requiredFields.every(isFieldFilled)) {
  return toast.error('Please fill out all fields');
}

Scenario 2: Variables in a Form Object (Even Better!) #

If your variables are part of a form data object, you can skip manual array creation entirely:

const formData = {
  a1: true,
  a2: "str",
  a3: { b: true },
  a4: [],
  a5: ""
};

if (!Object.values(formData).every(isFieldFilled)) {
  return toast.error('Please fill out all fields');
}

Bonus: Identify Which Field Is Missing #

For better user experience, you can pinpoint exactly which field needs attention:

const fieldNames = ['a1', 'a2', 'a3', 'a4', 'a5'];
const emptyFieldIndex = requiredFields.findIndex(field => !isFieldFilled(field));

if (emptyFieldIndex !== -1) {
  return toast.error(`Please complete the field: ${fieldNames[emptyFieldIndex]}`);
}

Why This Works #

• Scalable: Adding new fields just requires adding them to the array/form object—no more extending a messy long && chain.
• Type-Aware: Handles edge cases like boolean false, numeric 0, and empty arrays/objects exactly how you define.
• Readable: The helper function makes your validation rules explicit, so other developers (or future you) can easily adjust them.

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