今天的文章内容非常精彩实用，最后一部分会教大家纯Python编写出下面这样炫酷的应用（动图录制出来太大，所以压缩完之后看起来有点卡，但实际运行非常流畅推荐大家亲自运行体验）：
这是我的系列教程「Python Dash快速web应用开发」的第十期，在上一期的教程中，我们针对Dash中常用的几种表单输入控件进行了介绍，结合以前学习过的其他部件，已经可以满足基本的网页表单提交需求。
而今天的教程我们将继续来学习Dash中有关表单控件的一些高级知识，get到这些知识之后，我们就有能力开发出更加完善和先进的网页表单功能。
我们在上一期教程中已经对常见的几种具有不同功能的表单控件进行了比较详细的介绍，而在正式的开发网页表单时，不仅仅是将表单控件排列摆放出来那么简单随意，我们往往需要为控件添置一些补充内容，从而更好地引导用户使用它们，或是扩充出更多功能，这在Dash中我们可以借助dash_bootstrap_components的力量：
2.1 利用Form()、FormGroup()更好地组织表单dash_bootstrap_components中的Form()与FormGroup()被设计用于更快捷地排布我们的表单控件，使用逻辑是先用FormGroup()组织好每一个表单控件，再将若干个FormGroup()形成的列表作为Form()的children即可，从下面这个简单的例子出发：
❝
app1.py
❞
importdash
importdash_html_componentsashtml
importdash_bootstrap_componentsasdbc
app=dash.Dash(__name__)
app.layout=html.Div(
dbc.Container(
dbc.Form(
[
dbc.FormGroup(
[
dbc.Label("用户名",html_for="username"),
dbc.Input(id="username",placeholder="请输入用户名",autoComplete='off')
]
),
dbc.FormGroup(
[
dbc.Label("账号密码",html_for="password"),
dbc.Input(
type="password",
id="password",
placeholder="请输入密码",
),
dbc.FormText(
"密码必须同时包含大写字母、小写字母和数字！",color="secondary"
),
]
),
dbc.FormGroup(
[
dbc.Button('注册')
]
)
]
),
style={
'margin-top':'200px',
'max-width':'400px'
}
)
)
if__name__=='__main__':
app.run_server(debug=True)
可以看到，在上面例子中的网页表单，共包含了两个输入框和一个按钮共三个控件，通过将控件组织在FormGroup() Form()的结构中，使得这些控件在布局上自成一体非常方便。
相信你也注意到我们有些FormGroup()中除了控件自身，还添置了一些额外的辅助性质的部件，常用的有：
- 「dbc.Label()」
利用dbc.Label()部件，我们可以在对应控件之前添加说明文字，利用html_for参数可为其绑定具有某个id的控件，利用color参数可以快捷修改其颜色；
- 「dbc.FormText()」
利用dbc.FormText()可以在表单控件之后为其添加格式美观的说明文字；
- 「dbc.FormFeedback()」
dbc.FormFeedback()的作用比较有意思，它可以帮助我们简化对表单控件输入内容的验证过程，其参数valid同之前介绍过的Input()部件的valid参数，只不过这里我们在同一个FormGroup()中为指定表单控件添置valid参数相反的两种预设的FormFeedback()内容部件，接着只需要写个回调关联控件自身即可：
❝
app2.py
❞
importdash
importdash_html_componentsashtml
importdash_bootstrap_componentsasdbc
fromdash.dependenciesimportInput,Output
app=dash.Dash(__name__)
app.layout=html.Div(
dbc.Container(
dbc.Form(
[
dbc.FormGroup(
[
dbc.Label("账号密码",html_for="password"),
dbc.Input(
id="password",
placeholder="请输入密码",
autoComplete='off'
),
dbc.FormText(
"密码至少同时包含大写字母、小写字母和数字！",color="secondary"
),
dbc.FormFeedback(
"密码格式满足要求！",valid=True
),
dbc.FormFeedback(
"密码格式不满足要求！",
valid=False,
),
]
)
]
),
style={
'margin-top':'200px',
'max-width':'400px'
}
)
)
@app.callback(
[Output('password','valid'),
Output('password','invalid')],
Input('password','value')
)
defcheck_password_format(value):
importre
ifvalue:
#检查是否满足密码格式要求
ifall([
re.search('[a-z]',value),
re.search('[A-Z]',value),
re.search('[0-9]',value),
value.__len__()!=0
]):
returnTrue,False
else:
returnFalse,True
returndash.no_update
if__name__=='__main__':
app.run_server(debug=True)
