使用Flask如何在Bootstrap模態框（Modal）里實現表單的渲染和驗證？

目前我用Bootstrap實現了模態框的登錄和註冊效果。但現在我用flask的render_template渲染模板時怎麼調用它？因為Bootstrap要求模態框的代碼要放在文檔的最高層級內(作為body標籤的直接子元素)，而flask的render_template函數要求要渲染的html文件要放在templates文件夾內，我最初是將模態框登錄代碼放在單獨的login文件內，期望通過模板繼承實現，但後來發現並沒有成功繼承模態框代碼。請問我現在應該如何組織代碼解決這個矛盾，謝謝了。

下面是login.html的代碼

在使用g保存全局變數login_form的報錯和代碼：

1、模板繼承。你對模板繼承的理解有偏差。模態框和觸發按鈕應該放在一起才能生效。你的觸發按鈕放在基模板的導航欄上，而模態框放在了login.html里。雖然在login.html里重載了基模板的login塊，但你渲染其他頁面（比如說index.html）的時候，並不會載入login.html的內容。

如果登陸註冊按鈕只在主頁（index.html）可見，那就放到主頁里。如果在許多頁面都可見，就需要放在基模板里。這就遇到了第二個問題——form變數如何傳遞？

2、全局變數。因為大部分的頁面都要繼承基模板，所以form變數得是全局可訪問的。我們可以使用g變數存儲form，這樣就不用在每一個視圖裡都實例化form對象。下面的函數生成了login_form變數，可以在基模板里使用。

from flask import Flask, g

@app.context_processor
def inject_info():
g.form = LoginForm()
return dict(login_form=g.form)


渲染時，模板里的&標籤的action屬性指向login視圖的URL，這樣可以在login視圖處理表單驗證。

3、表單驗證。既然有表單，那麼就要考慮驗證的問題。從上面的截圖看，你沒有渲染錯誤信息。另外，因為表單放在模態框里，所以驗證沒通過的話，仍然要跳轉到模態框以便顯示錯誤信息。但是Bootstrap的模態框沒法使用錨點打開，也就是說直接訪問http://example.com#mymodal-login沒法打開模態框。需要用戶再次點擊按鈕才能看到錯誤信息。

基於上面的考慮，你有兩種選擇：

1）使用支持錨點打開的模態框插件，比如Remodal。

2）使用AJAX提交表單，接收並渲染錯誤信息。