如何在Python NiceGUI中实现步进器表单验证，仅验证通过才可跳转？

要让垂直步进器的Next按钮仅在第一步必填字段填写完整且通过验证后才可点击，核心是跟踪必填字段的有效性，动态控制按钮的启用状态，具体实现如下：

修改后的完整代码 #

from nicegui import ui

def create_user():
    # 替换为你的用户创建业务逻辑
    ui.notify('用户创建成功！', type='positive')

with ui.stepper().props('vertical').classes('w-full') as stepper:
    # 用响应式变量跟踪第一步必填字段是否全部有效
    is_first_step_valid = ui.reactive(False)

    def check_validity():
        # 校验每个必填字段：内容非空 + 无验证错误
        f_name_ok = f_name.value.strip() != '' and not f_name.validation_error
        l_name_ok = l_name.value.strip() != '' and not l_name.validation_error
        # 如果Roll号是必填项，就添加下面这行
        # roll_ok = sheetroll_num.value.strip() != '' and not sheetroll_num.validation_error
        is_first_step_valid.value = f_name_ok and l_name_ok

    with ui.step('用户基本信息'):
        with ui.grid(columns=1):
            # 名字：必填+长度至少2位的验证
            f_name = ui.input(
                label='First Name',
                validation={'invalid': lambda val: len(val.strip()) < 2},
                on_change=check_validity
            ).classes('capitalize').props('required=required')
            m_name = ui.input(label='Middle Name').classes('capitalize')
            # 姓氏：同样必填+长度验证
            l_name = ui.input(
                label='Last Name',
                validation={'invalid': lambda val: len(val.strip()) < 2},
                on_change=check_validity
            ).classes('capitalize').props('required=required')
            # Roll号：验证长度不超过4位，按需添加required属性
            sheetroll_num = ui.input(
                label='Roll',
                validation={'invalid': lambda val: len(val.strip()) > 4},
                on_change=check_validity
            )

        with ui.grid(columns=2).classes("place-items-center gap-8"):
            ui.label('Gender').classes('capitalize')
            # 修正原代码默认值错误，匹配选项内容
            gender = ui.select(['Male', 'Female'], value='Male')
            with ui.stepper_navigation():
                # 绑定按钮禁用状态：仅当所有字段有效时启用
                ui.button('Next', on_click=lambda: stepper.next() if is_first_step_valid.value else None)\
                    .bind_property('disabled', is_first_step_valid, backward=lambda x: not x)

    with ui.step('登录凭证'):
        with ui.grid(columns=1):
            username = ui.input(label='Email(Username)')
            # 密码框添加密码隐藏属性
            password = ui.input(label='Password').props('type=password')
            ui.button(on_click=create_user, icon='add').props('flat').classes('ml-auto')
            with ui.stepper_navigation():
                ui.button('Done', on_click=lambda: ui.notify('操作完成！', type='positive'))
                ui.button('Back', on_click=stepper.previous).props('flat')

ui.run()

关键逻辑说明 #

1. 响应式状态跟踪：用ui.reactive(False)创建动态变量，实时同步第一步所有必填字段的验证结果。
2. 实时校验触发：check_validity函数会在每个必填输入框内容变化时自动执行，检查字段是否非空且通过验证，更新响应式变量的状态。
3. 按钮状态联动：通过bind_property将Next按钮的disabled属性与响应式变量绑定，当所有字段有效时，按钮自动解除禁用。
4. 原代码问题修正：调整了验证逻辑（原逻辑写反，改为长度不足2位时提示无效），同时修正了性别选择的默认值错误。

内容的提问来源于stack exchange，提问作者unstuck