REST - 単一ページアプリケーションで検証エラーを処理する方法

Question

フォームをREST経由で送信し、検証エラーが発生した場合、有効なフィールドを保持し、検証に失敗した既存の値を復元し、これらのフィールドは失敗しました。

これはSpring MVCを使用したサーバー側のレンダリングでは簡単ですが、クライアント側でこれを行うにはどうすればよいでしょうか？私はカスタムエラーオブジェクトを返すことができ、それを傍受し、それに応じてフィールドを設定するjavascript関数を作ることができます。

しかし、クライアント側の検証エラーに関する定型文を減らすライブラリやパターンはありますか？私はReactとSpringに取り組んでいます。

編集

検証することで、私は、入力フィールドの唯一の正しいデータ型と長さを意味するものではありませんが、いくつかの制約がオブジェクトの内部状態に依存し、それがビジネスルールに従って関係です。クライアントはデータ型の検証のみを行い、サーバーはビジネス検証を実行する必要があります。そして、問題は、上で説明したように、サーバーでの検証の失敗をどのように処理するかです。

Answer 1

JQuery検証プラグインについてはどうですか？ https://jqueryvalidation.org/valid/

Answer 2

最も簡単な方法は、ある種のフレームワークを適応させることです。フォーム検証のための個人的な好みはAngularJsです。

これは、必要な入力を確認するためのディレクティブ、正規表現の検証、最小/最大などの機能を備えています。

ngMessagesディレクティブと連携して、スムーズな操作が可能です。

次のコードの優雅さを考えるあなたの例を与えるために...詳細は 歓声

をhttps://docs.angularjs.org/guide/formsを確認してください。

<form name="myForm"> 
    <label> 
    Enter your name: 
    <input type="text" 
      name="myName" 
      ng-model="name" 
      ng-minlength="5" 
      ng-maxlength="20" 
      required /> 
    </label> 
    <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre> 

    <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert"> 
    <div ng-message="required">You did not enter a field</div> 
    <div ng-message="minlength">Your field is too short</div> 
    <div ng-message="maxlength">Your field is too long</div> 
    </div> 
</form>