svelte 并非直接运行原生 html/js，而是通过编译将逻辑与 dom 绑定解耦；手动写 `onclick="validate()"` 或外链 `<script>` 会导致函数未定义，必须将 js 放入 `<script>` 标签内并使用 `bind:value` 和 `on:click` 等响应式语法。</script>
在 Svelte 中，JavaScript 不能像传统 HTML 那样通过全局函数 + 内联事件（如 onclick="validate()"）调用，原因有三：
- 作用域隔离：Svelte 组件内的 <script> 是模块作用域，函数不会自动挂载到 window；
- 编译机制：Svelte 将组件编译为高效、无副作用的 JavaScript，原始 HTML 被重写（如你看到的 data-sveltekit-preload-data），外链或内联 <script type="text"> 标签会被忽略；
- 响应式设计哲学：Svelte 鼓励声明式绑定（如 bind:value），而非命令式 DOM 操作（如 document.getElementById），这既提升可维护性，也避免竞态与内存泄漏。
✅ 正确写法如下（推荐使用 TypeScript，但 lang="ts" 可省略以兼容纯 JS）：
<script lang="ts">
let username = "";
let password = "";
function validate() {
if (username === "kullaniciadi" && password === "sifre") {
alert("Giriş başarılı!");
window.location.href = "ana_sayfa.html";
} else {
alert("Kullanıcı adı veya şifre yanlış. Lütfen tekrar deneyin.");
}
}
</script>
<form on:submit|preventDefault={validate}>
<label for="username">Kullanıcı Adı:</label>
<input bind:value={username} type="text" id="username" name="username" />
<label for="password">Şifre:</label>
<input bind:value={password} type="password" id="password" name="password" />
<button type="submit">Giriş Yap</button>
</form>? 关键改进说明：
- ✅ 使用 bind:value={username} 实现双向数据绑定，无需 document.getElementById；
- ✅ 使用 on:click={validate}（或更语义化的 on:submit|preventDefault）绑定事件处理器，Svelte 会自动注入上下文；
- ✅ 移除所有无效标签：<script type="text" src="..."> 在 Svelte 中非法且被忽略；<br><br> 应改用语义化换行（如 </label><br />）或 CSS 控制间距；
- ✅ 推荐用 <button type="submit"> 替代 <input type="button">，更符合表单语义，且支持键盘回车提交。
⚠️ 注意事项：
立即学习“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 特有的简洁性与可预测性。
