如何在 JavaScript 中创建实时验证表单
发布: (2025年12月14日 GMT+8 00:02)
3 min read
原文: Dev.to
Source: Dev.to
概览
表单无处不在——登录、注册、结算。
但你是否曾经填写表单后才发现 必须提交才能看到错误？
如果表单 在你输入时就自行验证，不是更好吗？
在本文中，我们将使用原生 JavaScript 和轻量库 Signel.js（不依赖 React、Vue 或其他重量框架）来构建一个 实时验证表单。思路如下：
- 每个输入在用户键入时更新一个中心 状态对象。
- 状态变化会自动触发 验证逻辑。
- 错误或提示会 即时反映在 DOM 中。
HTML 结构
<!DOCTYPE html>
<html>
<head>
<title>Live validation form</title>
</head>
<body>
<div class="warning-box">
<label>Username</label>
<input class="username" type="text" />
<label>Password</label>
<input class="password" type="password" />
</div>
<div class="message">
$$message
</div>
</body>
</html>JavaScript 验证逻辑
// Create reactive state bound to the .warning-box element
let data = el('.warning-box', {
username: "", // updated from .username input
password: "", // updated from .password input
message: "" // warning message displayed in the DOM
});
// Bind inputs to the state
input('.username', data, 'username');
input('.password', data, 'password');
// Validate username
watch(data, 'username', value => {
if (value.length 0) {
data.message = "Username must be at least 3 characters";
} else {
data.message = "";
}
});
// Validate password
watch(data, 'password', value => {
if (value.length 0) {
data.message = "Password must be at least 7 characters";
} else {
data.message = "";
}
});结果
完整源码
<!DOCTYPE html>
<html>
<head>
<title>Live validation form</title>
</head>
<body>
<div class="warning-box">
<label>Username</label>
<input class="username" type="text" />
<label>Password</label>
<input class="password" type="password" />
</div>
<div class="message">
$$message
</div>
<script>
let data = el('.warning-box', {
username: '',
password: '',
message: '',
});
input('.username', data, 'username');
input('.password', data, 'password');
watch(data, 'username', value => {
if (value.length 0) {
data.message = "Username must be at least 3 characters";
} else {
data.message = '';
}
});
watch(data, 'password', value => {
if (value.length 0) {
data.message = "Password must be at least 7 characters";
} else {
data.message = '';
}
});
</script>
</body>
</html>结论
在本文中，我们使用 Signel.js 构建了一个实时验证表单，学习了如何：
- 创建 绑定到 DOM 元素的响应式状态对象。
- 自动 将输入绑定到该状态。
- 使用 watcher 实时运行验证逻辑。
这种方式轻量、无框架，非常适合小项目或帮助理解响应式库在底层是如何工作的。
后续步骤
- 添加更多验证规则（例如邮箱格式、密码强度）。
- 将响应式列表与表单验证结合，构建待办事项应用。
- 探索 watcher 与状态如何驱动其他动态 UI。