共通したバリデーションのルールをJavascriptとPHPの両方で使いたい

Question

jQueryとPHPで使える検証ルールを作るとしたら、お勧めの方法はありますか？

検証ルールの例としては、フィールドXは>1かつ<10でなければならないなどです。

例えば上で書いたような「フィールドXは>1かつ<10でなければならない」というルールを、「フィールドXは3かつ<5でなければならない」と書き換えて、あとはファイルやデータベーステーブルを編集すればPHPとjQueryの両方でそのデータを適宜取得してパースできるようになりませんか？

どなたか回答お願いします。

Answer 1

以下のようなコードだと大丈夫だと思います。

【PHPの場合】

<?php $validation = Array( "field1" => Array( "required" => true, "minlength" => 5, "maxlength" => 10, "regex" => "^[a-zA-Z0-9]+$" ), "field2" => ....... .... ); if($_POST) { foreach($validation as $key => $value) { if(!isset($_POST[$key])){ if( $value['required']) die("Field ".$key." is required"); }else{ $length = strlen($_POST[$key]); if( $length < $value['minlength']) die("Field ".$key." too short"); if( $length > $value['maxlength']) die("Field ".$key." too long"); if( !preg_match("(".$value['regex'].")",$_POST[$key])) die("Field ".$key." incorrect format"); } } } ?>

【javascriptの場合】

<script type="text/javascript"> (function(rules) { var die = function(str) {alert(str); return false;}; document.getElementById('FormTest').onsubmit = function() { var elms = this.elements, i, it, r, s; for( i in rules) { r = rules[i]; it = elms.namedItem(i); if( typeof it == "undefined") { if( r.required) return die("Field "+i+" is required"); } else { s = it.length; if( s < r.minlength) return die("Field "+i+" too short"); if( s > r.maxlength) return die("Field "+i+" too short"); if( !s.match(new RegExp(r.regex))) return die("Field "+i+" incorrect format"); } } return true; }; })(<?=json_encode($validation)?>); </script>

書いてある通り、規則設定を定義するのが一般的な考えで、そこから json_encode($validation) でエスケープ処理され、規則をJavaScript 環境へと通します。まだ検証コードを複製してPHPとJSで走らせる必要がありますが、少なくとも2箇所でコードを変更することなく更に規則を加えられます。