用户是一群调皮的家伙，如果有机会，他们会提交各种各样的无意义数据。为了防止他们造成混乱，验证表单数据非常重要。
第一道防线是浏览器的内置表单验证，它可以很容易地，例如，将一个 <input> 标记为必填：
src/routes/+page
<form method="POST" action="?/create">
<label>
add a todo
<input
name="description"
autocomplete="off"
required
/>
</label>
</form>试着在 <input> 为空时按回车键。
这种验证很有帮助，但还不够。有些验证规则（比如唯一性）不能用 <input> 属性来表达，而且无论如何，如果用户是一个精英黑客，他们可能会简单地使用浏览器的开发者工具删除这些属性。为了防止这类恶作剧，你应该始终使用服务端验证。
在 src/lib/server/database.js 中，验证描述存在且唯一：
src/lib/server/database
export function createTodo(userid, description) {
if (description === '') {
throw new Error('todo must have a description');
}
const todos = db.get(userid);
if (todos.find((todo) => todo.description === description)) {
throw new Error('todos must be unique');
}
todos.push({
id: crypto.randomUUID(),
description,
done: false
});
}试着提交一个重复的待办事项。糟糕！SvelteKit 将我们带到一个不友好的错误页面。在服务端上，我们看到 “todos must be unique” 错误，但 SvelteKit 会对用户隐藏意外的错误消息，因为这些消息通常包含敏感数据。
更好的做法是停留在同一页面，并提供错误提示，以便用户可以修复它。为此，我们可以使用 fail 函数从 action 返回数据，并带上适当的 HTTP 状态码：
src/routes/+page.server
import { fail } from '@sveltejs/kit';
import * as db from '$lib/server/database.js';
export function load({ cookies }) {...}
export const actions = {
create: async ({ cookies, request }) => {
const data = await request.formData();
try {
db.createTodo(cookies.get('userid'), data.get('description'));
} catch (error) {
return fail(422, {
description: data.get('description'),
error: error.message
});
}
}在 src/routes/+page.svelte 中，我们可以通过 form 属性访问返回的值，这个属性只在表单提交后才会被填充：
src/routes/+page
<script>
let { data, form } = $props();
</script>
<div class="centered">
<h1>todos</h1>
{#if form?.error}
<p class="error">{form.error}</p>
{/if}
<form method="POST" action="?/create">
<label>
add a todo:
<input
name="description"
value={form?.description ?? ''}
autocomplete="off"
required
/>
</label>
</form><script lang="ts">
let { data, form } = $props();
</script>
<div class="centered">
<h1>todos</h1>
{#if form?.error}
<p class="error">{form.error}</p>
{/if}
<form method="POST" action="?/create">
<label>
add a todo:
<input
name="description"
value={form?.description ?? ''}
autocomplete="off"
required
/>
</label>
</form>你也可以从 action 返回数据而不用
fail包装它 —— 例如在数据保存成功时显示”success!”消息 —— 它同样可以通过form属性获取。
上一页 下一页
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<script>
let { data } = $props();</script>
<div class="centered">
<h1>todos</h1>
<form method="POST" action="?/create">
<label>
add a todo:
<input
name="description"
autocomplete="off"
/>
</label>
</form>
<ul class="todos">
{#each data.todos as todo (todo.id)}<li>
<form method="POST" action="?/delete">
<input type="hidden" name="id" value={todo.id} /> <span>{todo.description}</span><button aria-label="Mark as complete"></button>
</form>
</li>
{/each}</ul>
</div>
<style>
.centered {max-width: 20em;
margin: 0 auto;
}
label {width: 100%;
}
input {flex: 1;
}
span {flex: 1;
}
button {border: none;
background: url(./remove.svg) no-repeat 50% 50%;
background-size: 1rem 1rem;
cursor: pointer;
height: 100%;
aspect-ratio: 1;
opacity: 0.5;
transition: opacity 0.2s;
}
button:hover {opacity: 1;
}
.saving {opacity: 0.5;
}
</style>