JSパスワード強度検証（IE、Firefox、Google対応）_JavaScriptスキル

大概样式:

ソースコード:

复制代码代码如下:

/ /=================HTML页面=================
onblur="ValidateInput('password',this.value)" onkeydown="validatePwdStrong(this.value);" />

JS 文件

复制代代码如下:

/ /使用$代替document.getElementById関数数
var $ = function(v) { return document.getElementById(v); }

/*************************************************** * **ユーザー入力の検証******************************************* * ***********/
function ValidateInput(要素, 値) {
//验证密码
if (要素 == "パスワード") {
if (value.toString().length < 6) {
$('tipPosition').className = 'error';
$('tipPosition').innerHTML = "暗号設定のセキュリティ。暗号の長さが短すぎます。";
戻る;
}
else {
$('tipPosition').className = 'success';
$('tipPosition').innerHTML = "塗り写正确。";
}
}
}
/*================================秘密验证JS =========== 開始==================================== ===*/
//密码初開始化の样式
function InitCss() {
$('tipPosition').className = 'tip';
$('tipPosition').innerHTML = "最小長さ:6。最大長さ:16。";
}

/*================================秘密暗号度 ==== =======開始======================================*/

function Evaluate(word) {
return word.replace(/^(?:([a-z])|([A-Z])|([0-9])|(.)){5 ,}|(.) $/g, "$1$2$3$4$5").length;
}

function validatePwdStrong(value) {
var pwd = {
color: ['#E6EAED', '#AC0035', '#FFCC33', '#639BCC', ' #246626'],
テキスト: ['太短', '弱', '一般', '很好', '极佳']
};
function colorInit() {
$('pwdStrong_1').style.backgroundColor = pwd.color[0];
$('pwdStrong_2').style.backgroundColor = pwd.color[0];
$('pwdStrong_3').style.backgroundColor = pwd.color[0];
$('pwdStrong_4').style.backgroundColor = pwd.color[0];
}
if (Evaluate(value) == 1) {
colorInit();
$('pwdStrong_1').style.backgroundColor = pwd.color[1];
$('pwdStrong_text').innerHTML = pwd.text[1];
$('pwdStrong_text').style.color = pwd.color[1];
}
else if (Evaluate(value) == 2) {
colorInit();
$('pwdStrong_1').style.backgroundColor = pwd.color[2];
$('pwdStrong_2').style.backgroundColor = pwd.color[2];
$('pwdStrong_text').innerHTML = pwd.text[2];
$('pwdStrong_text').style.color = pwd.color[2];
}
else if (Evaluate(value) == 3) {
colorInit();
$('pwdStrong_1').style.backgroundColor = pwd.color[3];
$('pwdStrong_2').style.backgroundColor = pwd.color[3];
$('pwdStrong_3').style.backgroundColor = pwd.color[3];
$('pwdStrong_text').innerHTML = pwd.text[3];
$('pwdStrong_text').style.color = pwd.color[3];
}
else if (Evaluate(value) == 4) {
$('pwdStrong_1').style.backgroundColor = pwd.color[4];
$('pwdStrong_2').style.backgroundColor = pwd.color[4];
$('pwdStrong_3').style.backgroundColor = pwd.color[4];
$('pwdStrong_4').style.backgroundColor = pwd.color[4];
$('pwdStrong_text').innerHTML = pwd.text[4];
$('pwdStrong_text').style.color = pwd.color[4];
}
}

//==================CSS ファイル=================

コードをコピー コードは次のとおりです:

body
{
font: 13px Song 王朝;
}
/*パスワード確認プロンプト CSS --------------------------------開始- ----- ------------------------*/
#tipPosition
{
幅: 400px; 🎜>高さ: 16px;
行の高さ: 18px;
}
.tip
{
url(images/register_tip.png) ) リピートなし 10px 中央;
ボーダー: 1px #0E5863 破線;
.error
{
background: #FBECDF url(images/register_error) .png) no- 繰り返し 10px 中央;
境界線: 1px 赤の破線;
}
.success
{
背景: #D6FCD2画像/register_success.png) いいえ -repeat 10px center;
border: 1px #2F5D36 破線
color: #3D934A;
}
/*パスワード強度 CSS -------- - - - - - - - - - - - - -始める - - - - - - - - - - - - - ------- */
#pwdStrong_color
{
幅: 136px;
高さ: 3px;
border-collapse: ボーダー間隔: 0;
背景: #E6EAED;
#pwdStrong_color td
{
幅: 44px; /*td width を追加しないと、Google Chrome は正常に表示されません*/
}
#pwdStrong_text
{
font: 12px Song 王朝
}

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？

1 か月前 By DDD

R.E.P.O.ファイルの保存場所：それはどこにあり、それを保護する方法は？

1 か月前 By DDD

R.E.P.O.最高のグラフィック設定

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

アサシンのクリードシャドウズ：シーシェルリドルソリューション

1週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7393

15

Java チュートリアル

1630

14

CakePHP チュートリアル

1357

52

Laravel チュートリアル

1268

25

PHP チュートリアル

1217

29

もっと見る