React应用中如何校验指定结构JSON对象的所有属性值是否全为空

核心逻辑是遍历对象所有属性值，判断是否全部符合空值规则，不需要硬编码每个属性的判断，后续结构新增字段也能自动适配。

基础实现（适配你当前的默认结构场景） #

你的默认结构所有空值都是空字符串，直接用以下方法即可：

/**
 * 校验对象所有属性值是否全为空字符串
 * @param {Object} obj 待校验的固定结构对象
 * @returns {Boolean} 全为空返回true，否则返回false
 */
const isAllEmpty = (obj) => {
  return Object.values(obj).every(value => value === '')
}

使用示例 #

const emptyData = {
    name:"",
    email:"",
    dob:"",
    password:""
}
const filledData = {
    name:"张三",
    email:"",
    dob:"",
    password:""
}

console.log(isAllEmpty(emptyData)) // true
console.log(isAllEmpty(filledData)) // false

增强版实现（兼容更多空值场景） #

如果后续属性可能出现null、undefined、全空格字符串这类空值，可以调整判断逻辑：

const isAllEmpty = (obj) => {
  return Object.values(obj).every(value => {
    // 字符串类型先去除首尾空格再判断
    if (typeof value === 'string') return value.trim() === ''
    // 处理null、undefined的情况
    return value == null
  })
}

React 项目中使用示例 #

在表单提交等场景可以直接调用校验：

import { useState } from 'react'

function UserForm() {
  const [formData, setFormData] = useState({
    name:"",
    email:"",
    dob:"",
    password:""
  })

  const handleSubmit = (e) => {
    e.preventDefault()
    // 提交前校验
    if (isAllEmpty(formData)) {
      alert('请至少填写一项内容')
      return
    }
    // 正常提交逻辑
  }

  // 省略表单输入绑定逻辑
  return <form onSubmit={handleSubmit}>{/* 表单字段 */}</form>
}

扩展说明 #

如果存在部分不需要参与空校验的属性（比如隐藏的id字段），可以在遍历时过滤对应属性：

const isAllEmpty = (obj) => {
  return Object.entries(obj).every(([key, value]) => {
    // 过滤不需要校验的属性
    if (key === 'id') return true
    return value === ''
  })
}

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