JavaScript表单验证函数失效及Logo显示不全问题求助

一、feedback()函数未触发alert提示的问题 #

常见原因及修复方式 #

• 事件绑定错误
  检查表单的提交事件是否正确关联函数：
  • 若用HTML属性绑定，必须写完整调用语句：<form onsubmit="return feedback()">，遗漏括号或return都会导致函数不执行。
  • 若用JS事件监听，确保正确获取表单元素并阻止默认提交行为：

    document.querySelector('form').addEventListener('submit', function(e) {
      e.preventDefault(); // 阻止页面刷新
      feedback();
    });
    

• 函数语法错误
  打开浏览器控制台（F12）查看报错信息，比如未闭合的括号、未定义的变量都会导致函数直接失效。举个错误示例：

  // 错误：缺少闭合括号
  function feedback() {
    if (input.value === '') {
      alert('请输入内容')
  }
  

  修正后确保语法完全正确。
• 默认提交行为打断提示
  表单默认提交会刷新页面，alert可能还没显示就被跳转覆盖。必须在函数内添加阻止逻辑：

  function feedback() {
    // 验证逻辑
    alert('验证提示');
    return false; // 阻止表单提交
  }
  

二、Logo图片在border-radius容器中显示不全的问题 #

常见原因及修复方式 #

• 容器未开启溢出隐藏
  默认情况下，图片不会被容器的圆角裁剪，需给容器添加overflow: hidden：

  .logo-wrap {
    border-radius: 30px;
    overflow: hidden; /* 关键属性，隐藏超出圆角的部分 */
    width: 120px;
    height: 120px;
  }
  

• 图片尺寸与容器不匹配
  若图片尺寸远大于容器，会被截断。可通过CSS让图片适配容器：

  .logo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持比例填充容器，完整显示用contain */
  }
  

• 容器盒模型导致空间挤压
  若容器设置了padding或border，需开启box-sizing: border-box，确保宽高包含内边距和边框：

  .logo-wrap {
    box-sizing: border-box;
    border-radius: 30px;
    overflow: hidden;
    width: 120px;
    height: 120px;
    padding: 5px;
    border: 2px solid #ccc;
  }
  

内容的提问来源于stack exchange，提问作者Lewis Lim Lewis Lin Yitzhe