iter: d17 表单错误态覆盖包裹式控件 + 校验时机事件

This commit is contained in:
ui-arch-bot
2026-10-23 16:59:46 +08:00
parent fa168b9a1c
commit bdc1fec3f9
8 changed files with 41 additions and 10 deletions
+2 -1
View File
@@ -268,10 +268,11 @@ const content = h(
'表单校验',
'form + formItem:必填 / 长度 / 正则校验,全部通过才触发提交;失焦校验、输入清错。',
form(
{ submitText: '注册', onSubmit: () => formResult(`提交成功:${username()} / ${email()}`) },
{ submitText: '注册', onSubmit: () => formResult(`提交成功:${username()} / ${email()} / ${city()}`) },
[
formItem({ label: '用户名', required: true, value: username, rules: [{ min: 2, max: 12, message: '用户名需 2-12 个字符' }] }, textField({ placeholder: '2-12 个字符', value: username })),
formItem({ label: '邮箱', required: true, value: email, rules: [{ pattern: /^[\w.-]+@[\w-]+\.[\w.]+$/, message: '邮箱格式不正确' }] }, textField({ placeholder: 'you@example.com', value: email })),
formItem({ label: '城市', required: true, value: city }, select({ options: cities.map((c) => ({ value: c, label: c })), value: city, placeholder: '请选择城市…' })),
],
),
h('span', { class: 'out' }, () => formResult() || '等待提交…'),