JavaScriptでのパスワード検証[ステップバイステップのセットアップの説明]

認証と承認をサポートするWebサイトは、常にログインを通じてユーザー名とパスワードを要求します。 そうでない場合、ユーザーは次のセッションにログインするためにパスワードを登録して作成する必要があるため、Webサイトは特定のプロトコルまたはパラメーターを提供する傾向があります。 次のパラメータは、あらゆる形式のパスワード検証に一般的に使用されます。

• パスワードフィールドでは、英数字の入力のみが受け入れられます。
• 大文字のアルファベットで始まる必要があります。
• 少なくとも1つの大文字のアルファベットのパスワード。
• パスワードは特定の長さである必要があります。
• パスワードには1つの数値を使用する必要があります。
• パスワードには、最小長と最大長が必要です。

JavaScriptでのパスワード検証により、ユーザーがパスワードを作成するときにこれらのパラメーターが守られていることが保証されます。 適度に強力なパスワードを作成するには、指定された条件が満たされている必要があります。 パスワードの構造は、JavaScriptコードを使用した正規表現で検証できます。

パスワードフィールドでJavaScriptを使用してパスワード検証を処理するには、次の手順に従います。

Javascriptでのパスワード検証

1.HTMLフォームを作成します

フォームには、電子メール、電話番号、パスワードなどの基本的なフィールドが必要です。 フォームの構造を定義するHTMLコードの例を見てみましょう。

<！ DOCTYPE html >

< html lang = “ en " >

<頭>

< meta charset = “ UTF-8” >

< meta name = “ viewport” content = “ width = device-width、initial-scale = 1.0” >

<タイトル>フォーム</タイトル>

</ヘッド>

<本体>

< div class = “ container” >

<フォームアクション= "/action_page.php" >

< label for = “ usrname” >メールアドレス</ label >

< input type = “ text” id = “ usrname” name = “ usrname” required >

< label for = “ psw” >パスワード</ label >

< input type = “ password” id = “ psw” name = “ psw” pattern = “（？=。* \ d）（？=。* [az]）（？=。* [AZ]）。{8、 }” title = “少なくとも1つの数字と1つの大文字と小文字、および少なくとも8文字以上が含まれている必要があります”必須>

<入力タイプ= 「送信」値= 「送信」 >

</フォーム>

</ div >

< div id = “ message” >

< h3 >パスワードには次のものが含まれている必要があります： </ h3 >

< p id = “ letter” class = “ invalid” > A < b >小文字</ b >文字</ p >

< p id = “ Capital” class = “ invalid” > A < b >大文字（大文字） </ b >文字</ p >

< p id = “ number” class = “ invalid” > A < b > number </ b > </ p >

< p id = “ length” class = “ invalid” >最小< b > 16文字</ b > </ p >

</ div >

</本文>

</ html >

2.CSSを追加します

入力{

幅： 100％ ;

パディング： 12px ;

ボーダー： 1pxソリッド#ccc ;

border-radius ： 4px ;

ボックスサイズ： border-box ;

マージントップ： 6px ;

マージンボトム： 16px ;

}

/*送信ボタンのスタイルを設定します*/

入力[タイプ=送信]{

背景色： ＃4CAF50 ;

色：白;

}

/*入力用のコンテナのスタイルを設定します*/

.container {

背景色： ＃f1f1f1 ;

パディング： 20px ;

}

#message {

表示：なし;

背景： ＃f1f1f1 ;

色： ＃000 ;

位置：相対;

パディング： 20px ;

マージントップ： 10px ;

}

#message p {

パディング： 10px 35px ;

フォントサイズ： 18px ;

}

.valid {

色： rgb （ 3、184、190 ） ; _ _ _

}

.valid：before {

位置：相対;

左： -35px ;

コンテンツ： 「＆＃10004;」 ;

}

.invalid {

色：赤;

}

.invalid：before {

位置：相対;

左： -35px ;

コンテンツ： 「＆＃10006;」 ;

}

チェックアウト： 2021年のトップJavascriptフレームワーク

3.JavaScriptを追加します

var myInput = document 。 getElementById （ “ psw” ）;

var letter = document 。 getElementById （ “ letter” ）;

var Capital = document 。 getElementById （ “ Capital” ）;

var number = document 。 getElementById （ “ number” ）;

var length = document 。 getElementById （ “ length” ）

myInput 。 onfocus = function （）{

ドキュメント。 getElementById （ 「メッセージ」 ）。 スタイル。 display = “ block” ;

}

myInput 。 onblur = function （）{

ドキュメント。 getElementById （ 「メッセージ」 ）。 スタイル。 display = “ none” ;

}

myInput 。 onkeyup = function （）{

var lowerCaseLetters = / [ az ] / g ;

if （ myInput .value .match （ lowerCaseLetters ） ） {

手紙。 classList 。 削除（ 「無効」 ）;

手紙。 classList 。 追加（ 「有効」 ）;

} else {

手紙。 classList 。 削除（ 「有効」 ）;

手紙。 classList 。 追加（ 「無効」 ）;

}

var upperCaseLetters = / [ AZ ] / g ;

if （ myInput .value .match （ upperCaseLetters ） ） {

資本。 classList 。 削除（ 「無効」 ）;

資本。 classList 。 追加（ 「有効」 ）;

} else {

資本。 classList 。 削除（ 「有効」 ）;

資本。 classList 。 追加（ 「無効」 ）;

}

変数番号= / [ 0-9 ] / g ;

if （ myInput .value .match （ numbers ） ） {

番号。 classList 。 削除（ 「無効」 ）;

番号。 classList 。 追加（ 「有効」 ）;

} else {

番号。 classList 。 削除（ 「有効」 ）;

番号。 classList 。 追加（ 「無効」 ）;

}

if （ myInput .value .length > = 8 ） {

長さ。 classList 。 削除（ 「無効」 ）;

長さ。 classList 。 追加（ 「有効」 ）;

} else {

長さ。 classList 。 削除（ 「有効」 ）;

長さ。 classList 。 追加（ 「無効」 ）;

}

}

JavaScriptコードは、最初にIDによって要素を取得します。 その後、画面に表示できるようになります。 また、指定された形式でパスワードを取得するための条件を実行します。 大文字のアルファベット、小文字のアルファベット、および数字は、コードで作成された正規表現によって検証されます。

4.正規表現/REGEX

正規表現は、フィールドに渡されたリテラルの元の組み合わせに一致するパターンです。 パスワードの検証では、JavaScriptの正規表現を使用して、文字列を識別し、指定された形式であるかどうかを確認する上で重要な役割を果たします。 正規表現はJavaScriptオブジェクトです。 これらの正規表現は、パスワード検証のためにJavaScriptコードのスラッシュの間に記述されています。

例：re = /ac-b/とします

正規表現を使用してJavaScriptでパスワード検証を作成する方法は？

正規表現は、特殊文字と単純な文字を組み合わせたものです。 正規表現は、強力なパスワードのパラメーターまたは制約に従って形成されます。 文字列または文字の厳しい一致が存在する場合、特殊文字が使用されます。

上に示したJavaScriptコード-正規表現を使用して、大文字のアルファベット、小文字のアルファベット、および数字を検索しました。 式は、さまざまなシーケンスとサブシーケンスで作成されます。 正規表現で使用される文字ごとに特定の規則があります。

例：number = / [0-9]/gとします。 0〜9の範囲の数値を受け入れます。

チェックアウト： GithubのJavascriptプロジェクト

世界のトップ大学からオンラインでソフトウェアコースを学びましょう。 エグゼクティブPGプログラム、高度な証明書プログラム、または修士プログラムを取得して、キャリアを早急に進めましょう。

結論

パスワードの検証は、ユーザーが強力なパスワードを作成できるようにし、潜在的なパスワードクラックを回避できるため、非常に重要です。 JavaScriptを使用すると、対話性を追加できるため、パスワードに必要なすべての文字が任意の順序で含まれるまでユーザーに通知できます。 JavaScriptでコーディングされた正規表現は、シーケンスを定義する上で重要な役割を果たします。 書かれたパラメータをJavaScriptコードに落とし込みます。

フルスタック開発の詳細に興味がある場合は、upGrad＆IIIT-Bのフルスタックソフトウェア開発のエグゼクティブPGプログラムをチェックしてください。これは、働く専門家向けに設計されており、500時間以上の厳格なトレーニング、9以上のプロジェクト、および割り当てを提供します。 、IIIT-B卒業生のステータス、実践的な実践的なキャップストーンプロジェクト、トップ企業との雇用支援。