C# と VB.NET の質問掲示板

質問者さんはもう興味はないようですが、再入力で NaN にならず、ASP.NET に備わっ
ている検証機能ともある程度整合が取れた例を書いておきます。

この掲示板は質問者さん専用の Q&A サイトではなく、技術者同士の情報交換や情報の
蓄積も目的としていて、後で検索などでこのスレッドを訪れる人もいるかもしれないと
いうことで・・・


紹介した Teratail のスレッド（URL 下記に再掲）は ASP.NET MVC5 アプリの場合です。
今回の質問の ASP.NET Web Forms アプリの場合は話が若干違ってきます。

3桁コンマ区切り数字をコンマ無しでFrom送信したい
https://teratail.com/questions/173554

上の記事と同様のことを ASP.NET Web Forms アプリの場合はどうするかを以下に書き
ます。

まず、カンマを入れたり削除したりするための JavaScript のコードですが、上に紹介
した Teratail の記事のものをそのまま利用してみます。SurferOnWww の回答の View 
の中にまとまったものがありますので見てください。

注１：JavaScript に含まれる全角 ⇒ 半角変換は blur イベントで動く。その前に発生
　　　する change イベントで検証が動くが、その時点ではまだ全角のままなので、正規
　　　表現で検証 NG になる。その後半角に変換されるので見かけは正しく半角なのにエ
　　　ラーが出て混乱を招くかも。回避手段がなければ削除した方が良いと思いますが、
　　　そこは Teratail の記事でも同じことで、とりあえずそのまま使います。

注２：JavaScript のコードは Teratail の記事では html ソースの一番下に置いていま
　　　す。head タグの中に置く場合、一部を window.onload = function () { ... } の
　　　中に移動する必要があります。

MVC5 での検証には Model のプロパティにデータアノテーション属性を付与して行いま
したが、Web Forms では検証用のサーバーコントロールを利用します。

Teratail の MVC5 記事の Price には Required（必須入力）, RegularExpression（数字 
1 〜 6 文字）, Range（100 から 10000 まで）属性を付与しています。

Web Forms アプリで、それらと同等（全く同じではありません）の検証コントロールを検
証対象の TextBox に付与すると以下のようになります。

<asp:TextBox ID="Price" runat="server" ClientIDMode="Static"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" 
    ErrorMessage="価格は必須" ControlToValidate="Price">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server"
    ErrorMessage="数字 1 〜 6 文字" ControlToValidate="Price" 
    ValidationExpression="^(\d{1,2},\d{3})|(\d{1,6})$">
</asp:RegularExpressionValidator>
<asp:RangeValidator ID="RangeValidator1" runat="server" 
    ErrorMessage="価格は100〜10000の間で入力してください。" ControlToValidate="Price" 
    MaximumValue="10000" MinimumValue="100" Type="Currency">
</asp:RangeValidator>

正規表現パターンは Teratail の記事の MVC5 の ^\d{1,6}$ から ^(\d{1,2},\d{3})|(\d{1,6})$ 
に変更しました。

理由は、Web Forms では送信ボタンクリックで form が submit される時点でもクライアント側
での検証がかかるからです。その時点では文字列は 1,234 という形なので MVC5 と同じ正規表現
パターン ^\d{1,6}$ では検証 NG になります。

と言って、正規表現パターンを ^\d{1,2},\d{3}$ のようにすると、今度は change イベントで
行われる検証の時点では 1234 という形式なので検証 NG になります。

なので、正規表現パターンは ^(\d{1,2},\d{3})|(\d{1,6})$ として submit される時点および 
change イベントが発生する時点の両方で正規表現による検証を通るようにしています。

以上で基本的な動きはとりあえず OK となります。どういう動きかと言うと：

(1) テキストボックスの初期表示は 1234
(2) ユーザーが編集動作に入る時 focus イベントが発生（初期表示が 1,234 ならスクリプト
　　で 1234 に書き換わる）
(3) ユーザーが例えば 3210 というように編集
(4) 次の作業に移るためフォーカスを外す
(5) change イベントが発生し検証がかかる
(6) blur イベントが発生しスクリプトで 3,210 に書き換える
(7) ユーザーが送信ボタンをクリック
(8) submit イベントが発生しスクリプトで 3,210 を 3210 に書き換える
(9) サーバーで 3210 を受信。サーバー側での検証も OK となる。

しかしながら、上に述べた全角 ⇒ 半角変換スクリプトをどうするかとか、

■ 全てのブラウザで問題ないか？

■ ユーザーが数字だけ入力してくれると期待するのは無理があるが、サンプルの検証コントロ
　　ールだけで対応できるか？

■ ユーザーがブラウザの JavaScript を無効にした場合はサーバー側だけで検証することに
　　なるがそこは問題ないか？

・・・などさらなる検討が必要と思います。不特定多数のユーザーが不特定多種のブラウザで
アクセスしてくるインターネットに公開するような場合は特に。


以下、本題とは直接関係ない話ですが、ASP.NET 4.5 以降でクライアントスクリプトを利用する
サーバーコントロール（上の例では検証コントロールがそれです）が正しく機能するには、必要
なクライアントスクリプトの ScriptManager への登録と、全ページでの ScriptManager の配置
が必要ですので注意してください。

詳しくは以下の記事を見てください。

ASP.NET 4.5 ScriptManager
http://surferonwww.info/BlogEngine/post/2018/04/23/aspnet-45-scriptmanager.aspx