プログラミング

【Python】Flask-WTFを使ってみよう③

投稿日:2021年1月3日 更新日:

前回「Flask-WTF」を使って「フォーム」の作成を行いました。
今回は「文字数」の入力を制限する「バリデーション」を設定していきたいと思います。

バリデーションを設定してみよう

バリデーションについてはこちら。

from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret'

class LoginForm(FlaskForm):
   username = StringField('ユーザー名')
   password = PasswordField('パスワード')

@app.route('/form', methods=['GET', 'POST'])
def form():
   form = LoginForm()
   if form.validate_on_submit():
      return '<h1>ユーザー名は {}. パスワードは {}.'.format(form.username.data, form.password.data)
   return render_template('form.html', form=form)

if __name__ == "__main__":
   app.run(debug=True)

前回までのコードを置いておきます。

前回の記事はこちら。

「InputRequired」をインポートしよう

「wtforms.validators」から「InputRequired」をインポートしてきます。

from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField

-------------------------------------------------
from wtforms.validators import InputRequired
-------------------------------------------------

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret'

class LoginForm(FlaskForm):
   username = StringField('ユーザー名')
   password = PasswordField('パスワード')

@app.route('/form', methods=['GET', 'POST'])
def form():
   form = LoginForm()
   if form.validate_on_submit():
      return '<h1>ユーザー名は {}. パスワードは {}.'.format(form.username.data, form.password.data)
   return render_template('form.html', form=form)

if __name__ == "__main__":
   app.run(debug=True)

バリデーションの中身を記述しよう

まずは「ユーザー名」にバリデーションを設定します。

追記するもの
  1. 「forms.py」に「validators=[InputRequired()]」を追加
  2. 「form.html」に「{% for %}」と「{% end for %}」を追加

1.「forms.py」

from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField
from wtforms.validators import InputRequired

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret'


-------------------------------------------------
class LoginForm(FlaskForm):
   username = StringField('ユーザー名',  validators=[InputRequired()])
   password = PasswordField('パスワード')
-------------------------------------------------


@app.route('/form', methods=['GET', 'POST'])
def form():
   form = LoginForm()
   if form.validate_on_submit():
      return '<h1>ユーザー名は {}. パスワードは {}.'.format(form.username.data, form.password.data)
   return render_template('form.html', form=form)

if __name__ == "__main__":
   app.run(debug=True)

2.「form.html」

<html>
   <head>
   <title>TestForm</title>
  </head>
  <body>
     <h1>入力フォーム</h1>
     <form method="POST" action="{{ url_for('form') }}">
        {{ form.csrf_token }}
        {{ form.username.label }}
        {{ form.username }}


----------------------------------------
        <div>
           {% for error in form.username.errors %}
           <span style="color: red;">{{ error }}</span>
           {% endfor %}
        </div>
----------------------------------------


        {{ form.password.label }}
        {{ form.password }}
        <input type="submit" value="送信">
     </form>
  </body>
</html>

それぞれ追記しました。
確認してみましょう。

サーバーにアクセスして確認しよう

「localhost:5000/form」にアクセスします。

何も入力せずに「送信」を押すと、このような表示が出るはずです。

文字数を規定してみよう

文字数を規定するには「Length」をインポートしてあげましょう。
そして「validators = ~ 」の後ろに「Length」を追記していきます。

from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField


------------------------------------------------------
from wtforms.validators import InputRequired, Length
------------------------------------------------------


app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret'


-------------------------------------------------------------------------
class LoginForm(FlaskForm):
   username = StringField('ユーザー名', validators=[InputRequired(), Length(min=8, max=16, message='8文字以上16文字以下で入力してください')])
   password = PasswordField('パスワード')
-------------------------------------------------------------------------


@app.route('/form', methods=['GET', 'POST'])
def form():
   form = LoginForm()
   if form.validate_on_submit():
      return '<h1>ユーザー名は {}. パスワードは {}.'.format(form.username.data, form.password.data)
   return render_template('form.html', form=form)

if __name__ == "__main__":
   app.run(debug=True)

文字数を「8文字以上16文字以下」に設定しました。
条件に合わない場合はエラーが表示されます。
では再度確認していきましょう。

「ANDo」では「4文字」なので、エラーが表示されるはずです。
それでは「送信」。

しっかり表示されました。

まとめ

今回は「文字数」をバリデーションしてみました。
次回は「パスワード」の方を設定していきたいですね。
ぜひ真似してみてください。
それではまた。

-プログラミング
-

執筆者:


  1. […] 【Python】Flask-WTFを使ってみよう③ […]

comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

【Excel VBA】ユーザーフォームを使ってみよう3

前回はフォームのデザインまで作ることができました。今回は「ボタン」にプログラムを登録していきます。 前回の記事はこちら 【Excel VBA】ユーザーフォームを使ってみよう2 ユーザーフォームのデザイ …

【エクセル】で「ちょこっとプログラミング」応用編#1

プログラミングをしたことのない人向けにExcelでできる「ちょこっとプログラミング」を紹介します。今回は「空白のセルまで値を取得する」から【応用】として「セルの値で新規ファイルを作成する」を題材にやっ …

【Python】Flaskで掲示板を作ってみよう①

前回「Flask」の動作を確認することができたので「掲示板」の作成をやっていきたいと思います。今回は「index.html」を表示させるところまでいきたいと思います。 前回の記事はこちら 【Pytho …

【Python】ANACONDA NAVIGATORを使ってみよう

今回は「ANACONDA NAVIGATOR」でライブラリのインストール方法を紹介します。 ANACONDA NAVIGATORを使ってみよう 「ANACONDA NAVIGATOR」を使えば、簡単に …

社内イントラネットに掲示板作成してみた。②

「社内イントラネットに掲示板作成してみた。①」に続きましてIISのインストール方法を紹介します。 社内イントラネットに掲示板作成してみた。① IISを使用するメリット 「ASP」を使用して動的なサイト …

YouTube