1

こんにちは。
ショッピングサイトを作成しており、お届け先情報のエラーを表示させるにあたって、
その中で文字数制限をかけたいのですが、例えば:電話番号は8~10文字までなど
色々なサイトを参考し見ましたが、??となり少し理解ができません。
以下のHTML内に記述したいです。
どのような方法で記述すればよいでしょうか。ご教示いただけますと幸いです。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>エラー表示</title>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<th:block th:fragment="InformationError">
    <div id="InformationError" title="入力情報エラー" class="hidden">
        <div class="error NameError">NAME</div>
        <div class="error TelNoError hidden"></div>
    <div class="error AddressError hidden"></div>
    </div>
</th:block>
</body>
</html>
1
  • 1
    「入力制限を設けたい」とありますが、肝心の入力欄が見当たりませんし、質問で提示されているHTMLはフォームから 送信した後 のエラー画面を組み立てているように見えます。
    – cubick
    2020年6月11日 7:20

4 件の回答 4

2

で文字列の長さのチェックをするのはあくまでユーザーの便宜を図る目的に限定してください。

攻撃者は を使わずに長い文字列を POST できるので による文字数のチェックはサーバー側のセキュリティ面では役に立たないことには注意が必要です。データベースに格納できるより長い文字列を受け取った場合に「サーバー側で」処理をすることは必須です。

1

はじめまして。典型的には以下の方法が考えられます。
実現方法や仕組みはご利用のツールによって変化します

  • フォーム内のinputタグにmaxlengthやpatternを指定する
  • JavaScriptでフォーム内容を読み取り入力を確認する。
  • サーバー側のプログラムで入力を確認する
  • データベース側で制限する

ですが、データベースに不正な値が入力されないように、最低限その直前にサーバー側のプログラムで必ず確認するのが妥当です。
フロントエンドでのチェックはユーザー体験を高めるために重要ですが、これに依存すると不正な値を入力される危険性があります。

0

入力された文字数を数えるといった機能は、Javascriptなどで書いたプログラムで実現します。

入力が"6文字以上20文字以内"という制限を満たしているかどうかをチェックする例が、送信フォームの入力文字数をチェック のページにあるので、参考にしてください。

1
  • 提示リンク先は BMP 外の文字 (サロゲートペア) を2文字と呼んでいるような気のせいがしますね。まあその辺は要件次第ってことで。
    – 774RR
    2020年6月11日 7:21
0
  • validation, バリデーション, 検証
  • constraint, 制約

とか呼ばれている機能になるかと思いますが、他の方の回答にもある通り、実現手段は複数あるので、現在の質問文に対して具体的な解決策は提示しづらいかなと感じます。

Spring BootとThymeleafを用いることは前提として考えて良さそうに見えますので、Spring Boot公式ガイドを紹介します。
(GitHubからコードをチェックアウトしてそのまま動かせますので、すぐに内容は理解できずとも雰囲気は分かるかと思います。)

こちらは、入力フォームの"Name"欄への入力を2文字以上30文字以下に制限し、この条件を満たさない場合"size must be between 2 and 30"というエラーメッセージを画面に出すような実装になっています。

実装方法について詳しい説明はSpring BootリファレンスSpring MVCリファレンスを"validation"で検索すると出てきます。

…が、ともあれ、質問したい内容の方向性はこういうことなのか、いやいやそうじゃなくて(例えば)フロント/JavaScriptで実現したいんだよ、なのかみたいなところを質問文に追記してもらえればもう少し具体的な回答がつきやすくなるかと思います。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。