hifiveのバリデーションで複雑な条件を設定する
hifiveの入力値チェック（バリデーション）機能であるFormControllerはHTMLタグに設定するだけで入力値チェック機能を追加できます。必須や数値の桁数チェックなどは簡単に行えますが、ワークフローによってはより複雑なフローが求められることでしょう。
そこで今回はより複雑な入力値チェックを実現する方法について紹介します。
1. 正規表現でチェックする
正規表現を用いることでより複雑なパターンによる入力値チェックが可能になります。これはHTML側で指定できます。例えば電話番号（国内限定）の場合は次のように設定できます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <input id="tel" name="tel" type="text" class="form-control" data-pattern="^[0-9]{2,3}\-[0-9]{2,4}\-[0-9]{3,4}" /> |
なお、正規表現でのエラーの場合、エラーメッセージに正規表現が出てしまいます。これは開発者以外には分かりづらいと思われますので、
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| this._formController.setSetting({ | |
| property: { | |
| : | |
| tel: { | |
| displayName: '電話番号', | |
| message: '{displayName}のフォーマットが違います', | |
| }, | |
| } | |
| }); |
のようにして message をカスタマイズすることをお勧めします。
2. customFuncを用いる
より複雑な処理の場合、customFuncオプションが利用できます。この場合、 FormController.addRule メソッドを利用します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| this.formController.addRule({ | |
| birthday: { | |
| customFunc: function(value) { | |
| // 処理を書く | |
| } | |
| } | |
| }); |
入力値が問題なかった場合はtrue、問題がある場合はfalseを返すだけです。
非同期処理の場合
入力値を使ってサーバに問い合わせてレスポンスを受け取る場合があります。例えばユーザIDがユニークかどうかチェックする場合です。
そうした時には Promise オブジェクトを返すようにし、検証した結果が問題なければresolve、問題ある場合はrejectを返すようにします。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| this.formController.addRule({ | |
| userId: { | |
| customFunc: function(value) { | |
| var dfd = h5.async.deferred(); | |
| h5.ajax('existUser', { | |
| // 非同期処理 | |
| }).done(function(resp) { | |
| // 入力値に問題なかった場合 | |
| dfd.resolve({ | |
| // 何かデータがあれば指定 | |
| }); | |
| // 入力値に問題があった場合 | |
| dfd.reject({ | |
| // 何かデータがあれば指定 | |
| }); | |
| }); | |
| return dfd.promise(); | |
| } | |
| } | |
| }); |
3. 入力値をグルーピングする
電話番号を-（ダッシュ）ごとに区切ったり、年月日を別な入力欄に分けることはよくあります。そして、それら複数の入力欄を一つに扱って入力値の検証に使うでしょう。その場合は data-h5-input-group-container でグループ名を定義します。この時にも各入力項目に対するバリデーション条件が指定できます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div data-h5-input-group-container="birthday"> | |
| <input name="year" type="text" data-max="[2015,true]" data-required />年 | |
| <input name="month" type="text" data-required />月 | |
| <input name="day" type="text" data-required />日 | |
| </div> |
このように定義すると入力チェック時に一つのデータとして扱えるようになります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| this.formController.addRule({ | |
| birthday: { | |
| customFunc: function(value) { | |
| // 分けて取り出す | |
| var y = value.year; | |
| var m = value.month; | |
| var d = value.day; | |
| } | |
| } | |
| }); |
入力値のチェックは常に求められる機能ですが、実際にどうチェックを行うかは業務フローによって異なってくることでしょう。hifiveのバリデーションライブラリは業務システムの設計に合わせて柔軟に実装できます。ぜひ導入してください。
hifive開発者ブログ 
コメントは受け付けていません。