hifiveのバリデーション機能の設定について

hifive 1.2では入力値の検証（バリデーション）機能が追加されました。これはHTMLタグのdata-*要素に設定する入力値の検証機能です。今回はそのタグに設定する要素について紹介します。

設定パターンは13個

現在の検証として設定できるパターンは13個となっています。例えば requiredであれば、 data-required という指定を行います。

required

入力値の必須チェックです。null/undefined/空文字が検出できます。

<input data-required />

assertNull

入力値がnullまたはundefinedであることをチェックします。何かデータが入っているとエラーになります。

<input data-assertNull />

assertNotNull

入力値がnullまたはundefinedでないことをチェックします。ラジオボタンの必須チェックなどに使えます。

<input data-assertNotNull />

max

最大値のチェックです。一つ目の数字が最大値、二つ目をtrue指定した場合はその最大値も含めることになります。

<input data-max="10,true" /> <!-- 10以下 -->
<input data-max="10" /> <!-- 10未満 -->

min

最小値のチェックです。一つ目の数字が最小値、二つ目をtrue指定した場合はその最小値も含めることになります。

<input data-min="10,true" /> <!-- 10以上 -->
<input data-min="10" /> <!-- 10より大きい -->

assertFalse

値がfalseであるかどうかをチェックします。

<input data-assertFalse />

assertTrue

値がTrueであるかどうかをチェックします。

<input data-assertTrue />

future

値が日付型、かつ現在時刻より未来であるかどうかチェックします。

<input data-future />

past

値が日付型、かつ現在時刻より過去であるかどうかチェックします。

<input data-past />

digits

数字の桁数判定を行います。整数部分が最初の引数で示す桁数以下であり、かつ小数部分が二つ目の引数で示す桁数以下となっているかチェックします。

<input data-digits="3,2" /> <!-- 100.33はOK。100.222はエラー -->

pattern

正規表現による入力値のパターンをチェックします。

<input data-pattern="^[0-9]{2,4}\-[0-9]{2,4}\-[0-9]{2,4}$" /> <!-- 電話番号の簡易チェック -->

size

値の大きさをチェックします。プロパティまたは配列の数をチェックすることができます。

<input data-size="2,5" /> <!-- 2〜5個の選択が可能 -->

customFunc

関数を指定します。第一引数に値がくるので、trueを返せば検証OKです。

<input data-customFunc="myFunc" />

検証パターンを使いこなせば、複雑な入力チェックの仕組みも簡単に実現できます。HTMLタグ上であればメンテナンスもしやすいので、誰でもすぐに変更できるようになるでしょう。

JSDoc: Class: FormValidationLogic