.net column
.NET開発者のためのブログメディア

プロフィール入力

jQueryでのValidationの使い方を紹介!Validationを正しく使いこなそう!

2021年03月16日

SE
validationメソッドとはなんでしょうか?

PM
このメソッドは、プログラマーが意図した通りにユーザーが入力したかを検証することができるメソッドです。

jQueryでのValidationの使い方を紹介します


今回は、jQueryでのValidationの使い方について説明します。

Validationとは、ユーザが正しく値を入力したかチェックする機能です。例えば、必須項目を入力しているか、メールアドレスの形式で入力しているか、数字で入力しているか、10文字以内で入力しているか、など、様々あります。これらをjQueryで実現できます。

jQueryでのValidationの使い方に興味のある方はぜひご覧ください。

Validationの使い方

Validationを使えるようにするには、jQuery Validationプラグインを利用します。ダウンロードする方法と、ダウンロードせずにcdnを使う方法があります。ここではcdnを使う方法で紹介します。

バージョンがありますので、最新のものを使うようにするとよいでしょう。

ルールの記述方法

Validationのルール記載方法を紹介します。

jQueryで以下のように記述します。

 

ルールは複数記述することもできます。代表的なルールとしては、以下があります。
・required : true/false 必須項目
・email : true/false Emailのフォーマットになっているか
・equalTo : “要素名” 要素の値と一致しているか
・number : true/false 数字になっているか
・birth : true/false 日付形式になっているか
・minlength : 数字 最小文字列長を指定
・maxlength : 数字 最長文字列長を指定

上記のいくつかについて、詳細を以降の章で紹介します。

required

Validationのrequiredルールの使い方について紹介します。値が入力されているか否かをチェックします。

HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

See the Pen
jquery_validate2
by kskumd (@kskumd)
on CodePen.

email/equalTo

Validationのemail/equalToルールの使い方について紹介します。emailは、値がメール形式になっているか、equalToは指定要素と値が等しいかをチェックします。

HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

See the Pen
jquery_validate3
by kskumd (@kskumd)
on CodePen.

number

Validationのnumberルールの使い方について紹介します。値が数字か否かをチェックします。

HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

See the Pen
jquery_validate4
by kskumd (@kskumd)
on CodePen.

SE
フォーム要素によって実行されるメソッドなんですね。

PM
エラー表示や独自ルールを作成することもできます。ここでは基本の記述方法を紹介しました。

まとめ

いかがでしたでしょうか。jQuery Validationプラグインを利用した、Validationの使い方について説明しました。ルールの記述方法について、ソースコードとともに紹介しました。

ぜひご自身でjQueryのソースコードを書いて、理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags

Jobs