クライアント側バリデーションチェックする方法

お疲れ様です

最近今更ながら、キングダムを読んでいます。
人気なだけあって面白いですね。
まだ10巻ほどしか読んでいないですが、嬴政と羌瘣と縛虎申が好きなキャラですね。
縛虎申は死にましたが
とにかく面白かったので、最新刊まで読もうと思います。

さて、本題ですが、
普段なら特に書くことがないーとなっていましたが、最近業務で使用した、jQuery Validation Plugin
というプラグインが使いやすかったので、そのことについて書きたいと思います。

jQuery Validation Pluginは入力値をリアルタイムで検証してくれるjQueryのプラグインです。
入力ルールを設定するだけでユーザの入力した内容をバリデーションしてくれます。
jQuery Validation Plugin はクライアント側でのみのチェックです。
サーバー側は別で実装する必要があります

使用法

• jquery.validate.js
• jquery.validate.min.js
  どちらかをダウンロードし、htmlファイルで読み込みます。
  この時jqueryより下に記述する必要があります。
  

次にjsファイルを作成し、上記の内容をベースに設定していきます。

バリデーションルールを設定する

バリデーションルールはrules:{}の中に、ルールに基づいた検証の結果、エラーであればエラーメッセージに設定した文字列が返されます。
下記の画像ではinput属性のnameの値が「name」となっている項目に対して入力必須のルールを設定しています。

function内のvalueにはフォームの値が入っており、element内にはフォームの要素が入っています

あとは画像のように条件分岐でしたい検証を行いtrue,falseを返せばおっけーです。
falseが返れば条件を満たしていないので、’パスワードに一つ以上の数値が必要です’と返り、
trueならtrueです