svelte 并非直接运行原生 html/js，而是通过编译将逻辑与 dom 绑定解耦；手动写 `onclick="validate()"` 或外链 `
在 Svelte 中，JavaScript 不能像传统 HTML 那样通过全局函数 + 内联事件（如 onclick="validate()"）调用，原因有三：
- 作用域隔离：Svelte 组件内的
- 编译机制：Svelte 将组件编译为高效、无副作用的 JavaScript，原始 HTML 被重写（如你看到的 data-sveltekit-preload-data），外链或内联
- 响应式设计哲学：Svelte 鼓励声明式绑定（如 bind:value），而非命令式 DOM 操作（如 document.getElementById），这既提升可维护性，也避免竞态与内存泄漏。
✅ 正确写法如下（推荐使用 TypeScript，但 lang="ts" 可省略以兼容纯 JS）：
? 关键改进说明：
- ✅ 使用 bind:value={username} 实现双向数据绑定，无需 document.getElementById；
- ✅ 使用 on:click={validate}（或更语义化的 on:submit|preventDefault）绑定事件处理器，Svelte 会自动注入上下文；
- ✅ 移除所有无效标签：
- ✅ 推荐用
⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 不要试图在 Svelte 组件中操作全局 window 或 document（除非必要），优先使用响应式变量和 $: 声明式逻辑；
- 若需跳转，建议使用 SvelteKit 的 goto()（如 import { goto } from '$app/navigation';），比 window.location.href 更安全、可 SSR 兼容；
- 开发时务必查看浏览器控制台错误（如 Uncaught ReferenceError: validate is not defined），这是典型的函数作用域问题信号；
- 初学者强烈建议从 Svelte 官方示例 入手，理解 bind:、on:、$: 等核心语法。
掌握这些原则后，你的表单验证逻辑将真正“活”起来——不仅功能可用，更具备 Svelte 特有的简洁性与可预测性。
