« 時間指定 | トップページ | スピナー »

2007年7月28日 (土)

入力チェック

入力フォームの入力チェック

Textbox

Textboxが基本となり、他の入力チェックのwidgetは、Textboxを継承して作成されている。dojo.widget.Textboxをrequireする。

<input type="text"
       id="q1"
       name="test"
       dojotype="Textbox"
       trim="true"
       ucfirst="true" />

dojoType="Textbox"を付けたinput要素は以下の属性を取ることができる。

属性名概要
trim trueを指定すると前後の空白を除く
ucfirst trueを指定すると最初の文字が大文字となる
uppercase trueを指定すると全ての文字が大文字となる
lowercase trueを指定すると全ての文字が小文字となる
digit trueを指定すると数値以外の入力文字が削除される

ValidationTextbox

入力が必須の入力フォームに指定する。Textboxを継承している。

<input type="text"
       name="vt"
       dojotype="ValidationTextbox"
       required="true"
       missingmessage="* The occupation is required." />

ValidationTextboxは以下の属性と、Textboxの属性を取ることができる。継承しているTextboxの属性は全て利用できる。

属性名概要
required trueを指定すると入力がないときに、missingMessageで指定した文字を表示する
missingMessage 入力がないときに表示する文字列を指定する
invalidMessage 正しくない入力がされたときに表示する文字列を指定する。ValidationTextbox自体では使われないが、ValidationTextboxを継承したwidgetにおいて使われる
classPrefix 独自で定義した入力フォームのCSSのクラス名を指定する。指定したクラス名の最後に"Valid", "invalid", "Empty"を付けたクラス名がそれぞれ呼び出される

IntegerTextbox

整数チェック。ValidationTextboxを継承している。

<input type="text"
       name="it"
       dojotype="IntegerTextbox"
       signed="true"
       invalidmessage="Be sure to use a plus or minus sign." />
属性名概要
signed trueを指定すると+または-を最初に付けることが必要となる。デフォルトはeitherで符号はあってもなくてもよい。
separator "," など、桁を明示するための区切り文字として使う記号を指定する。
min 最小値
max 最大値

RealNumberTextbox

実数チェック。IntegerTextboxを継承している。

<input type="text"
       name="rt"
       dojotype="RealNumberTextbox"
       required="true"
       invalidmessage="This is not a valid real number." />
属性名概要
places 小数点以下の桁数
exponent trueを指定すると +5E-28 のように指数部分の指定が必要となる
eSigned trueを指定すると指数部分の+または-の指定が必要となる

CurrencyTextbox

通貨チェック。IntegerTextboxを継承している。

<input type="text"
       name="ct"
       value="\54,775"
       dojotype="CurrencyTextbox"
       symbol="\"
       fractional="false"
       invalidmessage="Invalid amount.  Include yen sign. Example: \12,000" />
属性名概要
symbol デフォルトの通貨記号は$、\などを指定して変更できる。
fractional 小数点以下を指定できるかどうかをtrueかfalseを指定する。デフォルトはomitted

IpAddressTextbox

IPアドレスチェック。ValidationTextboxを継承している。

<input type="text"
       name="ip"
       value="24.17.155.40"
       dojotype="IpAddressTextbox"
       allowipv6="false"
       allowhybrid="false"
       invalidmessage="Invalid IPv4 address." />

以下の属性は全てtrueまたはfalseを指定する。デフォルトはtrue

属性名概要
allowDottedDecimal ドット区切りの10進数表記を許すか
allowDottedHex ドット区切りの16進数表記を許すか
allowDottedOctal ドット区切りの8進数表記を許すか
allowDecimal 10進数表記を許すか
allowHex 16進数表記を許すか
allowIPv6 IPv6形式を許すか
allowHybrid IPv4とIPv6の両方を許すか

UrlTextbox

URLチェック。IpAddressTextboxを継承している。

<input type="text"
       name="url"
       dojotype="UrlTextbox"
       scheme="true"
       invalidmessage="Invalid URL.  Be sure to include the scheme, http://..." />
属性名概要
scheme http://を含むかどうか。trueまたはfalse
allowIP ホスト名としてIPアドレスを許可するか。デフォルトはfalse
allowLocal ホスト名としてlocalhostを許可するか。デフォルトはfalse
allowCC 2文字の国コードを許可するか。デフォルトはtrue
allowGeneric 登録されていないドメインを許可するか。デフォルトはtrue

EmailTextbox

Emailアドレスチェック。UrlTextboxを継承している。

<input type="text"
       name="email"
       dojotype="EmailTextbox"
       invalidmessage="Invalid Email Address." />
属性名概要
allowCruft <mailto:foo@yahoo.com>という形式を許可するか。デフォルトはfalse

EmailListTextbox

EmailTextboxを継承している。

<input type="text"
       name="emails"
       dojotype="EmailListTextbox"
       invalidmessage="Invalid Email Address List." />
属性名概要
listSeparator 区切り記号、デフォルトは ";", ",", "\n", " "のいずれか。

DateTextbox

日付チェック。ValidationTextboxを継承している。

<input type="text"
       lang="ja-jp"
       name="date"
       value="2007/06/12"
       dojotype="DateTextbox"
       invalidmessage="Invalid date. Use yyyy/MM/dd format." />
属性名概要
displayFormat yyyy/MM/ddのように表示形式を指定する。
formatLength short/medium/longのいずれかを指定する。

TimeTextbox

時間チェック。ValidationTextboxを継承している。

<input type="text"
       name="time"
       value="5:45:00"
       formatlength="medium"
       dojotype="TimeTextbox"
       invalidmessage="Invalid time." />
属性名概要
displayFormat HH:mm:ssのように表示形式を指定する。
formatLength short/medium/longのいずれかを指定する。

RegexpTextbox

正規表現による入力チェック。ValidationTextboxを継承している。

<input type="text"
       name="reg"
       value="someTestString"
       dojotype="RegexpTextbox"
       regexp="^[\w]+$"
       invalidmessage="Invalid Non-Space Text." />
属性名概要
regexp 正規表現
flags iやgなど、正規表現のオプション指定

UsStateTextbox

米国の2文字の州コードをチェック。ValidationTextboxを継承している。

<input type="text"
       name="state"
       value="CA"
       dojotype="UsStateTextbox"
       invalidmessage="Invalid US state abbr." />
属性名概要
allowTerritories Guam, Puerto Ricoなどを許す。AS, FM, GU, MH, MP, PW, PR, VI
allowMilitary 米軍の州コードを許す。AA, AE, AP

UsZipTextbox

米国のZIPコードをチェック。ValidationTextboxを継承している。

<input type="text"
       name="zip"
       value="98225-1649"
       dojotype="UsZipTextbox"
       invalidmessage="Invalid US Zip Code." />

UsSocialSecurityNumberTextbox

米国の社会保障番号をチェック。ValidationTextboxを継承している。

<input type="text"
       name="ssn"
       value="123-45-6789"
       dojotype="UsSocialSecurityNumberTextbox"
       invalidmessage="Invalid US Social Security Number." />

UsPhoneNumberTextbox

米国の電話番号をチェック。ValidationTextboxを継承している。

<input type="text"
       name="phone"
       value="(123) 456-7890"
       dojotype="UsPhoneNumberTextbox"
       invalidmessage="Invalid US Phone Number." />

« 時間指定 | トップページ | スピナー »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/232684/7303536

この記事へのトラックバック一覧です: 入力チェック:

« 時間指定 | トップページ | スピナー »