RegularExpressionValidatorのタイミング

締切済

質問者：julymann
質問日時：2007/07/17 13:15
回答数：1件

はじめまして

VS2005でasp.netでwebサイトの開発をしているものです
質問なのですが
RegularExpressionValidatorの検証機能のタイミングを
フォーカスが離れたときではなく入力されたときにしたいのですが
できますでしょうか？

RegularExpressionValidatorのControlToValidateを
テキストボックスに指定して、ValidationExpressionに正規表現を
設定する簡単な検証なのですが、
現在、この検証を行うタイミングがフォーカスが離れた瞬間
なのですが、これをキー操作で入力した瞬間に正規表現に
適さない場合はすぐにErrorMessageを出すようにしたいです
このようなことは可能なのでしょうか？
ご存知の方ご回答の方、よろしくお願いします

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： kero_mio
回答日時：2007/07/18 12:10

まず、キーが入力された段階でチェックさせるには、

JavaScriptの力を借りる必要があります。
ただ、RegularExpressionValidatorには、JavaScriptで
チェックさせるプロパティはありません。
CustomValidatorであれば、JavaScriptでチェックできますが、
それだと、Focusを離れた場合でしか、チェックができません。

そこで、チェック対象のテキストボックスにJavaScriptの
onKeyPressイベントを感知するようにし、onKeyPressイベントを
処理するJavaScriptを記述します。
そのJavaScriptで正規表現チェックを行い、エラーがあれば、
RegularExpressionValidatorのErrorMessageを
visibilityを設定することによって、表示させます。
サンプルを作りましたので、ご参考頂ければと思います。

サンプルは、99:99の書式＆5桁かをチェックしています。
5桁目が入力された段階でチェックするようにしています。

また、IEでしか動作確認してませんので、FireFoxや他のブラウザ
に対応させるには、もう少しカスタマイズが必要です。

■Default2.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>無題のページ</title>
<script language="JavaScript" type="text/javascript">
function TextBoxControl_Validate(e, textboxId, regularexpressionValidatorId)
{
　　// エラーメッセージを一旦非表示にする
　　var errorMessage = document.getElementById(regularexpressionValidatorId);
　　if ( errorMessage == null ) { return false; }
　　errorMessage.style.visibility = "hidden";

　　// チェック対象のテキストボックスの取得
　　var checkTextBox = document.getElementById(textboxId);
　　if ( checkTextBox == null ) {
　　　　return false;
　　}

　　// 入力値を取得する
　　var key = null;

　　if(window.event)
　　{
　　　　key = e.keyCode
　　}
　　else if(e.which)
　　{
　　　　key = e.which
　　}
　　var inputChar = String.fromCharCode(key);

　　// 既に入力されている値と今入力した値の桁数が5桁でない場合
　　if ( !(checkTextBox.value.length + inputChar.length == 5) )
　　{
　　　　return true;
　　}

　　// 正規表現でチェック
　　var str = checkTextBox.value + inputChar;
　　if (str.match(/^\d{2}\:\d{2}$/))
　　{
　　　　return true;
　　}
　　else
　　{
　　　　// エラーメッセージの表示
　　　　errorMessage.style.visibility = "visible";

　　　　// 入力文字が消えるため、戻り値はTrueにしておく
　　　　return true;
　　}

　　return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:RegularExpressionValidator
　　ID="RegularExpressionValidator1"
　　runat="server"
　　ControlToValidate="TextBox1"
　　ErrorMessage="エラーです。"
　　SetFocusOnError="True"
　　ValidationExpression="\d{2}\:\d{2}" />
<br />
<asp:TextBox ID="TextBox1" runat="server" MaxLength="5" />
<br />
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
</body>
</html>

■Default.aspx.vb
Partial Class Default2
　　Inherits System.Web.UI.Page

　　Protected Sub RegularExpressionValidator1_Init(ByVal sender As Object, ByVal e As System.EventArgs) _
　　　　　　　　　　　　　　　　　　　　　Handles RegularExpressionValidator1.Init
　　　　If Not IsPostBack Then
　　　　　　Dim keyPressScript As String
　　　　　　keyPressScript = String.Format("return TextBoxControl_Validate(event, '{0}', '{1}')", _
　　　　　　　　　　　　　　　　　　　　　　Me.TextBox1.ClientID, _
　　　　　　　　　　　　　　　　　　　　　　Me.RegularExpressionValidator1.ClientID)
　　　　　　Me.TextBox1.Attributes.Add("onKeyPress", keyPressScript)
　　　　End If
　　End Sub

End Class