パスワード検証は少なくとも6文字です

Question

パスワードの検証コードをいくつか作成し、一致するかどうかを確認するパスワードを確認しました。さらに、パスワードの長さが6文字未満であるかどうかをチェックし、6文字未満の場合はエラーを書き込み/表示する条件があります。しかし、私のコードは正しく機能しません。フィールド2に切り替えても、フィールド1の条件はチェックされず、両方の条件が正しい場合でもエラーが表示されます。

ここに私のコードがあります：

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";

    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }
    else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
        
    if(pass1.length > 5){
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "character number ok!"
    }
    else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
}  

         <input name="password" type="password" placeholder="password"  id="pass1"/>
         <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                  <div id="error-nwl"></div>
        

Answer 1

以下のコードを使用します。 まず、pass1.lengthは正しくありません。 pass1.value.lengthと書く必要があります。 第二に、最初に最初のブロックの長さを確認する必要があるため、最後に2つのブロックを比較することを追加しました。また、関数は最初のブロックの変更時にも呼び出される必要があります。

がんばろう！

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
        
    if(pass1.value.length > 5)
    {
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "character number ok!"
    }
    else
    {
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
        return;
    }
  
    if(pass1.value == pass2.value)
    {
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }
        else
    {
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
}  

<input name="password" type="password" placeholder="password"  id="pass1" onkeyup="checkPass(); return false;" />
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
<div id="error-nwl"></div>
        

Answer 2

これを試して：

if(pass1.value.length > 5)

Answer 3

前：

 if(pass1.length > 5)

後：

 if(pass1.value.length > 5)

そして、長さや許可された文字など、すべてが適合した後、平等をチェックする必要があります。

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";

    if(pass1.value.length > 5 && pass2.value.length > 5)
    {
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "character number ok!"

        if(pass1.value == pass2.value)
        {
            pass2.style.backgroundColor = goodColor;
            message.style.color = goodColor;
            message.innerHTML = "ok!"
        }
        else
        {
            pass2.style.backgroundColor = badColor;
            message.style.color = badColor;
            message.innerHTML = " These passwords don't match"
        }
    }
    else
    {
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }

}

<input name="password" type="password" placeholder="password"  id="pass1"/>
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
<div id="error-nwl"></div>

Answer 4

if (pass1.value.length > 5)

Trimは空白を削除し、パスワードの空白は有効な文字ではないため、trim（）を適用しないでください。

Answer 5

パス1の長さを確認するとき、実際にはその値を確認していません-pass1.length > 5-pass1.value.length > 5に変更する必要があります

Answer 6

できるよ：

if (pass1.value.trim().length > 5)

Answer 7

長さを確認するには、このように書く必要があります

if (pass1.value.length > 5)

そして、あなたのコードは正常に動作しています

Answer 8

正規表現を利用して検証を行うことができます。たとえば、このパスワードにいくつかの特殊文字を許可していますが、カウントは6を超えています

regex = pass1.value.search(/^[a-zA-Z0-9+&@#/%?=~_|!:,.;]{6,}+$/);

if(regex){
    message.innerHTML="Invalid Password.";
}else{
    message.innerHTML = " you have to enter at least 6 digit!";
}

Answer 9

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }
        else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
        
        if(pass1.value.length > 5){
                pass1.style.backgroundColor = goodColor;
                message.style.color = goodColor;
                message.innerHTML = "character number ok!"
                }
                else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
        
}  

<input name="password" type="password" placeholder="password"  id="pass1"/>
         <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                  <div id="error-nwl"></div>

Answer 10

パスワード検証の明らかに単純なタスクは複雑になる可能性があり、コードが意図したとおりに動作しない理由を特定するのは難しいかもしれません。課題の主な部分は、条件付きロジックを指定し、このロジックを作業コードに変換することです。

以下を達成したい：

1. ユーザーに6文字以上の長さのパスワードを入力させます
2. ユーザーにパスワードを確認させる
3. プロセスを通じてユーザーを支援する関連フィードバックをユーザーに提供する

これを条件付きロジック（擬似コード）に変換する1つの方法は次のとおりです。

if (password length is less than 6)
  inform user that password should be at least 6 characters
else if (passwords do not match)
  ask user to confirm password
else
  inform user that passwords match, all is ok

しかし、私のコードは正しく機能しません。フィールド2に切り替えても、フィールド1の条件はチェックされず、両方の条件が正しい場合でもエラーが表示されます。

コードは、異なるロジック（擬似コード）に従います。

if (passwords match)
  inform user that passwords match, all is ok
else
  inform user that passwords do not match

if (password is more than 5 characters)
  inform user that the password is long enough
else
  inform user that the password should be at least 6 characters

コードの問題の1つは、パスワードの長さが最後にチェックすることであるため、最初のif/elseチェックは冗長です（パスワードが一致する場合でも、関連するフィードバックは生成されません）。パスワードの長さに関するフィードバック。

もう1つの問題は、コードが6文字未満であっても一致するパスワードを受け入れることです。そのため、最初にパスワードの長さを確認し、その後両方のパスワードが一致するかどうかを確認します。

さらに、コードはユーザーがフィールド2（ '＃pass2'）に書き込むときにのみこれらのチェックを実行します。フィールド1の 'onkeyup'にもイベントハンドラーを追加する必要があります。

したがって、コードロジックを書き直す必要があります。これを行う方法の1つを次に示します。

function checkPass() {
  var neutralColor = '#fff'; // 'white';
  var badColor     = '#f66'; // 'red';
  var goodColor    = '#6f6'; // 'green';
  
  var password1 = getElm('pass1').value;
  var password2 = getElm('pass2').value;

  //if password length is less than 6
  if (password1.length < 6) {
    feedback('Enter a password of at least 6 characters');
    //we do not care about pass2 when pass1 is too short
    setBGColor('pass2', neutralColor);
    //if pass1 is blank, set neutral background
    if (password1.length === 0) {
      setBGColor('pass1', neutralColor);
    } else {
      setBGColor('pass1', badColor);
    }
  //else if passwords do not match
  } else if (password2 !== password1) {
    //we now know that pass1 is long enough
    feedback('Confirm password');
    setBGColor('pass1', goodColor);
    //if pass2 is blank, set neutral background
    if (password2.length === 0) {
      setBGColor('pass2', neutralColor);
    } else {
      setBGColor('pass2', badColor);
    }
  //else all is well
  } else {
    feedback('Passwords match');
    setBGColor('pass1', goodColor);
    setBGColor('pass2', goodColor);
  }
}

//helper function for document.getElementById()
function getElm(id) {
  return document.getElementById(id);
}

//helper function for setting background color
function setBGColor(id, value) {
  getElm(id).style.backgroundColor = value;
}

//helper function for feedback message
function feedback(msg) {
  getElm('error-nwl').innerHTML = msg;
}

<input name="password" type="password" placeholder="password"  id="pass1" onkeyup="checkPass()"/>
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass()" />
<div id="error-nwl">Enter a password of at least 6 characters</div>

Answer 11

正常に機能するため、行われた変更に関する追加コメントを見つけます。

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }
        else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
        
        if(pass1.value.length > 5){           ////////just added value here//
                pass1.style.backgroundColor = goodColor;
                message.style.color = goodColor;
                message.innerHTML = "character number ok!"
                }
                else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
        
}

<input name="password" type="password" placeholder="password"  id="pass1"/>
         <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                  <div id="error-nwl"></div>

Answer 12

function checkPassSize(field) {
        var pass = document.getElementById(field);
        var message = document.getElementById('error-nwl');
        var goodColor = "#66cc66";
        var badColor = "#ff6666";               
        if (pass.value && pass.value.length > 5) {
                pass.style.backgroundColor = goodColor;
                message.style.color = goodColor;
                message.innerHTML = "character number ok!"
                return true;
        } else {
                pass.style.backgroundColor = badColor;
                message.style.color = badColor;
                message.innerHTML = " you have to enter at least 6 digit!"
                return false;
        }
}

function checkPass() {
        var pass1 = document.getElementById('pass1');
        var pass2 = document.getElementById('pass2');
        var message = document.getElementById('error-nwl');
        var goodColor = "#66cc66";
        var badColor = "#ff6666";
        
        if(checkPassSize('pass1') && checkPassSize('pass2')){
                if (pass1.value == pass2.value) {
                        pass2.style.backgroundColor = goodColor;
                        message.style.color = goodColor;
                        message.innerHTML = "ok!"
                } else {
                        pass2.style.backgroundColor = badColor;
                        message.style.color = badColor;
                        message.innerHTML = " These passwords don't match"
                }
        }                                                               
}

<input name="password" type="password" placeholder="password"
        id="pass1" onkeyup="checkPassSize('pass1');" />
<input name="repeatpassword" type="password"
        placeholder="confirm password" id="pass2"
        onkeyup="checkPass(); return false;" />
<div id="error-nwl"></div>

Answer 13

やりたいことがいくつかあるようです。

1. パスワードは6文字以上である必要があります。それ以外の場合は、「6桁以上を入力してください！」というメッセージが表示されます。赤で表示されます。
2. 再入力はパスワードと一致する必要があります。そうでない場合、「これらのパスワードは一致しません」というメッセージが赤で表示されます。
3. 「両方」の条件に合格した場合、緑色のメッセージ「OK！」を表示します。 （私の推測）。
4. フィールドが空の場合、特別な色はありません。 （私の推測。）
5. パスワードは有効だが再入力が空の場合、緑色のメッセージ「文字番号は問題ありません！」 （再び、私の推測）。

私の提案、

• pass2でonkeyupを使用する場合、pass1でも同じことをしないのはなぜですか？
• onkeyupの代わりにonfocusoutイベントを使用することを検討してください。

次のコードは、あなたが探していることをするはずです。

function checkPass() {
  var getTag = Id => document.getElementById(Id);
  var pass1 = getTag('pass1');
  var pass2 = getTag('pass2');
  var message = getTag('error-nwl');
  var str;

  //Logic that handles Password.
  if (!pass1.value)
    pass1.removeAttribute('valid');
  else if (pass1.value.length < 6) {
    pass1.setAttribute('valid', false)
    str = " you have to enter at least 6 digit!";
  } else {
    if (!pass2.value)
      str=" character number ok!";
    pass1.setAttribute('valid', true);}

  //Logic that handles Retype.
  if (!pass2.value)
    pass2.removeAttribute('valid');
  else if (pass1.value != pass2.value) {
    pass2.setAttribute('valid', false);
    str = " These passwords don't match";
  } else
    pass2.setAttribute('valid', true);

  
  //Logic that handles the display of message.
  message.removeAttribute('valid');
  if (pass1.value && pass2.value && !str) {
    message.setAttribute('valid', true);
    message.innerHTML = "ok!"
  } else if (str) {
    message.innerHTML = str;
  } else
    message.innerHTML = '';
  return !!message.valid;

}

#pass1[valid=true] {
  background: #66cc66
}
#pass1[valid=false] {
  background: #ff6666
}
#pass2[valid=true] {
  background: #66cc66
}
#pass2[valid=false] {
  background: #ff6666
}
#error-nwl {
  color: #ff6666
}
#error-nwl[valid=true] {
  color: #66cc66
}

<input name="password" type="password" placeholder="password" id="pass1" onkeyup="checkPass()" />
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass()" />
<div id="error-nwl"></div>

Answer 14

JQueryを使用している場合は、これを使用できます jQuery Validation plugin

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Makes "field" required to be the same as #other</title>
        <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
    </head>
    <body>
        <form id="myform">
            <label for="password">Password</label>
            <input id="password" name="password" />
            <br/>
            <input type="submit" value="Validate!">
        </form>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
        <script>
            // just for the demos, avoids form submit
            jQuery.validator.setDefaults({
                debug: true,
                success: "valid"
            });
            $( "#myform" ).validate({
                rules: {
                    password: {
                        minlength: 6,
                        maxlength: 25, 
                        required: true
                    }
                }
            });
        </script>
    </body>
</html>

Answer 15

以下のコードを使用

valid=pass1.value.search(/^[A-Za-z0-9@_]{6,20}$/);

if(valid != 0){
    message.innerHTML="Invalid Password.";
}else if(pass1.value.length < 6){
      message.innerHTML = " you have to enter at least 6 digit!"
}

Answer 16

問題は、DOMノード値の長さではなく、単一のDOMノードの長さをチェックすることです。

あなたが現在持っているものは

var pass1 = document.getElementById('pass1');

if ( pass1.length > 5 ) {...

単一のDOMノードの長さは1のみです。見つかった場合、5を超えることはありません。
あなたが望んだのは、値の長さをチェックすることでした

var pass1 = document.getElementById('pass1');

if ( pass1.value.length > 5 ) {...

ただし、2番目のパスワードフィールドではなく、最初のパスワードフィールドに入力するときに、実際にそれを行う必要があります。

適切なイベントハンドラ、より良いチェック、およびメッセージのクラスを使用して、これを行う方法になります

var pass1   = document.getElementById('pass1');
var pass2   = document.getElementById('pass2');
var message = document.getElementById('error-nwl');

function msg(_msg, good, time) {
    message.innerHTML = _msg;
    message.classList.toggle('bad', !good);
    message.classList.add('visible');
    setTimeout(function() {message.classList.remove('visible')}, time);
}

pass1.addEventListener('input', function() {
    this.classList.remove('bad');
    this.classList.remove('good');
    if (this.value.length > 5) {
        this.classList.add('good');
        msg("Character number ok!", true, 1800);
    }
});

pass1.addEventListener('blur', function() {
    if (this.value.length <= 5) {
        this.classList.remove('good');
        this.classList.add('bad');
        msg("You have to enter at least 6 digit!", false, 1800);
    } else if (pass1.value !== pass2.value) {
        pass2.classList.remove('good');
        pass2.classList.add('bad');
        msg("Passwords don't match", false, 3000);
    }
});

pass2.addEventListener('input', function() {
    if (this.value.length > 5) {
        var matches  = pass1.value === pass2.value;
        var _message = matches ? "Passwords match!" : "Passwords don't match";
        pass2.classList.toggle('good', matches);
        pass2.classList.toggle('bad', !matches);
        msg(_message, matches, 3000);
    } else {
        message.classList.remove('visible');
        this.classList.remove('good');
        this.classList.remove('bad');
    }
});

pass2.addEventListener('blur', function() {
    var matches  = pass1.value === pass2.value;
    if (!matches) {
        pass2.classList.remove('good');
        pass2.classList.add('bad');
        msg("Passwords don't match", matches, 3000);
    }
});

#pass1.bad,
#pass2.bad {
  background: #ff6666;
}
#pass1.good,
#pass2.good {
  background: #66cc66;
}
#error-nwl {
  opacity: 0;
  color: #66cc66;
  transition: opacity 0.3s ease-in-out;
}
#error-nwl.bad {
  color: #ff6666;
}
#error-nwl.visible {
  opacity: 1;
}

<input name="password" type="password" placeholder="password" id="pass1" />
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" />
<div id="error-nwl"></div>

Answer 17

建物フォームの検証

検証するタイミング

まず、検証したい3つの場所があります。

• ユーザーが送信するときにフォームを検証します。
• ユーザーがフィールドを編集するときにフィールドを検証します。
• サーバーが受信したデータの検証。

サーバー側でデータを検証する必要がある理由は（他の2つの検証がどれほど優れているかに関係なく）、悪意のあるユーザーがHTMLおよびJavaScriptコードにアクセスしたり、リクエストを偽造したり、他の手段でクライアント側の検証をバイパスしたりできるためです。

とにかくサーバー側で検証が行われる場合、クライアント側の検証が必要なのはなぜですか？簡単な答えは、クライアント側の検証により、不正な送信の数が減るため、トラフィックが減ることです。 2番目の動機は、クライアント側の検証により、ユーザーにフィードバックをはるかに迅速かつ簡単に提供できることです。

とはいえ、現在の投稿ではクライアント側の検証のみを扱います。

検証コードを実行するには、適切なイベントを処理する必要があります。 JavaScriptでイベントハンドラーを追加する推奨方法は、ターゲット要素で addEventListener を呼び出すことです。悲しいことに ブラウザサポート はInternet Explorerの古いバージョンでは適切ではありません。

そのため、イベントハンドラーを追加するために、コードを jQueryが不要な場合があります から取得します。

function addEventListener(el, eventName, handler) {
  if (el.addEventListener) {
    el.addEventListener(eventName, handler);
  } else {
    el.attachEvent('on' + eventName, function(){
      handler.call(el);
    });
  }
}

注： attachEvent は、Microsoft独自の拡張機能です。

---

次に、処理するイベントを決定する必要があります...

最初の誘惑は、フィールドの微妙な変化を処理することです。これの欠点は、単一の文字を入力するだけで、システムがユーザーにそれが間違っていることを通知している可能性があることです（値が短すぎるなどの理由で）。これは、入力された単一の文字が間違っているように解釈され、ユーザーは次に進む前に間違っているものの解析を停止します。

Luke Wroblewski、「Webフォームでのインライン検証」、2009 は、ユーザーがフォームにすばやく入力する検証結果に「ぼかし」イベント（フォーカスの喪失）を使用することを示しています。

以下は、記事からの抜粋です。

（...）単純な質問が「正しい」とマークされたときに参加者が混乱したという事実は、この解釈をサポートします。

「有効な名前を正しく入力したか、自分の名前を正しく入力したか教えてくれますか？」

「これは、正しくフォーマットされた郵便番号または正しい郵便番号の確認ですか？」

これらのタイプの参加者の質問は、テスト中にいくつかの小さな問題を引き起こしました。参加者は、自分の正しい名前や郵便番号を知る方法がないことを知っていたため、緑色のチェックマークが「正しい」ことを意味しないことを知っていました。彼らは確信が持てませんでした。それが問題でした。メッセージの意味がわからないため、参加者は非常に簡単な質問に自信を持って答えるのではなく、モデレーターに質問することをやめました。

（...）

質問に答えようとしているときに複数の参加者がエラーメッセージに気付いたとき、メッセージが更新されるのを待つよりも、入力フィールドに追加の文字を1つ入力しました。更新されたメッセージに引き続きエラーが表示される場合は、別の文字を入力し、検証メッセージが再度更新されるのを待つなど、平均完了時間が長くなりました。

（...）

「赤く点滅する前に[フィールド]に何も入れる機会が得られないのはいらいらします。」

「名」フィールドをクリックすると、[私の名]が短すぎるとすぐに表示されました。まあもちろんです！まだ始めていません！」

「入力が完了していないときに赤い十字がどのように表示されるかは非常に面倒です。本当に気が散るだけです。」

したがって、最初の推奨事項は、検証にblurイベントを使用することです。

しかし、それは別の問題をもたらします。検証がblurでのみ発生する場合、フィールドのステータスが無効に設定されていると、ユーザーがフィールドを離れるまで、編集は無効として引き続き表示されます。これにより、ユーザーが入力した内容がまだ間違っているかどうか疑問に思うかもしれません。フィールドを離れるまで検証が行われないことに気付かないでしょう。

この問題を防ぐために、各フィールドには次のステータスがあります。

• 空の。フィールドの元のステータスです。すべてを無効として表示しないでください。
• 検証中。ユーザーがフィールドを入力または編集しています。有効でも無効でもありません。
• 有効。ユーザーがフィールドに有効な入力を行いました。
• 無効。ユーザーがフィールドに無効な入力を行いました。

これにより、次の状態図が得られます。

yUML 。で作成された図

注：実用上、EmptyとValidatingは同等と見なすことができます。どちらの状態でも、検証ステータスはユーザーに表示されません。また、ユーザーがフォームをリセットしたときにEmpty状態に戻ることも可能です（そのようなオプションが指定されている場合）。

次に、次のものがあります。

• 空： reset イベント。
• 検証：on input 、 change および keyup 。
• 有効または無効：on blur 。

注：考慮する可能性のある追加のことは、 timer を使用して、input、change、およびkeyupイベント。これを正しく行うには、これらのイベントの1つが実行されるたびに、このタイマーをリセットする必要があります。これはエラーが発生しやすいコードであり、ほとんど価値がありません。

---

どこで検証しますか？

HTML5は、すでに データフォーム検証 のさまざまな手段を追加しています。それでも、 ブラウザサポート は最適ではありません。つまり、HTML5検証の拡張を選択しても、ブラウザによっては機能しない場合があります。

そのため、代わりにHTML5検証をスキップし、イベントの追加に進みます。

function setupValidation(form)
{
    addEventHandler(form, 'submit', submitHandler);
    var elementIndex = form.elements.length;
    while (elementIndex--)
    {
        addEventHandler (form.elements[elementIndex], 'reset', resetHandler);
        addEventHandler (form.elements[elementIndex], 'input', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'change', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'keyup', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'blur', validateHandler);
    }
}

フォーム検証フレームワークまたはライブラリではなく、フォーム検証のみを構築していることを考えると、フォーム要素とフィールドを取得して、必要な検証を行うことができます。その場合、フォームはパラメーターである必要はありません。

ページが読み込まれたときにコードを実行するには、jQueryが不要な場合がある別のスニペットを取得します。

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', fn);
  } else {
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState != 'loading')
        fn();
    });
  }
}

---

次に、フィールドのステータスを保存できるようにする必要があります。これは、カスタムプロパティ、属性、または要素オブジェクトのクラスによって実行できます。検証をマークするクラスの使用は、フォームの表示にも役立ちます。

フォーム（submitHandler）を検証するとき、保存されたフィールドの検証に依存するか、再度検証するかを決定する必要があります。他のフィールドに依存するフィールドに検証がある場合は、その検証を古いものとしてマークすることができます。そうすることで、フォーム検証コードは検証を再度実行できるようになります。いずれにしても、検証は各フィールドを調べることで行われます。

resetHandlerおよびvalidatingHandlerに従って、前述のユーザーエクスペリエンスの理由から、validとinvalidの両方のステータスを削除することを考えています。

正しく行われれば、ユーザーに誤った信号が与えられる状況はないはずです。つまり、コードは、有効なフィールドを無効として表示しないでください。どちらも無効である場合、フィールドを有効として表示するべきではありません。

---

HTML5検証を無効にすることができます。これは、フォームにnovalidate属性を追加することで実行できます。次のようなJavaScriptでも実行できます。

form.setAttribute('novalidate', 'novalidate');

また、フィールドのプロパティwillValidateを表示することもできます。

HTML5検証を平均化する場合は、関数checkValidityを使用できます。

さらに読む： HTML5によるクライアント側フォーム検証 および HTML5フォーム：JavaScriptおよび制約検証API 。

また、記事 制約検証：Webフォームのネイティブクライアント側検証 By TJ VanTollには、HTML5検証の良い例があります。

---

完全なフォーム検証ライブラリを構築する場合、HTML5検証属性を読み取り、古いブラウザに提供するためにそれらの動作を模倣するという問題が発生します。また、HTML5が提供しない他の検証ルールを指定する方法（2つのフィールドが一致するかどうかを確認するなど）を、各ケースのJavaScriptコードを微調整することなく指定する方法について心配する必要があります（私が言ったように、ライブラリを作成しています）。

---

フィードバックの場所

ユーザビリティの提案は、フィードバックをインライン化することです。それは、フィードバックをテキストとしてフィールドの横にインライン要素を追加することです。次に、CSSまたはJavaScriptを使用して、見栄えを良くします。

この提案の理由は、スクリーンリーダーに依存する人々が正しい場所でフィードバックを得るためです。また、CSSが無効になっていたり、ロードに失敗した場合でも、引き続き意味があります。

これは、span要素を使用して既に実行していることとほぼ同じです。フィールドごとに1つ必要です。そしておそらく、フォーム全体の1つは、[〜＃〜] not [〜＃〜]のいずれかに直接関連付けられているメッセージを入れたいことです。フィールド。

---

注：フィールドの値を読み取るときは、通常field.valueを使用します。値の長さはfield.value.lengthです。ただし、入力の種類によって値の読み取り方法が変わることに注意してください。 radioおよびcheckboxには、field.checkedを使用します。 selectには、field.optionsが必要です（複数の値を持つことができるselectフィールドには特に注意が必要です）。最後に、image、reset、 'button'、およびsubmitにはチェックする値がありません。

---

複雑すぎますか？

あなたはそれをする必要はありません！他の人は以前にそれをやったことがあり、あなたはそれらからコードを取り出すことができます！ ムアハハハ！

これは、 validate.js または私自身の thoth.js などのオープンソースライブラリを使用して行われます。他の答えは、他のライブラリを示唆しています。

その他のアトラネーティブを見つける ができるはずです。完全なリストを作成するふりはしません。

コードを再利用することをお勧めします。また、そのようなライブラリのコードを調べて、それらがどのように機能するかを学ぶこともできます。

---

古い答え

コードにコメントを追加することから始めます。

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    // You start by checking if they match
    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
        // And then that messages gets removed by the result of the length check
    // Also, pass1.length is undefined
    if(pass1.length > 5){
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "character number ok!"
    }else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
}

         <input name="password" type="password" placeholder="password"  id="pass1"/>
         <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                  <div id="error-nwl"></div>
        

代わりに、別の方法で確認されるまでステータスが有効であることを示す必要があります。

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    message.style.color = goodColor;
    message.innerHTML = "ok!"

    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
    }else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
    if(pass1.value.length > 5){
        pass1.style.backgroundColor = goodColor;
    }else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
}

         <input name="password" type="password" placeholder="password"  id="pass1"/>
         <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                  <div id="error-nwl"></div>
        

さらに、両方のフィールドを一致させてから最初のフィールドを編集しても、メッセージは消えません。実際、2番目のメッセージのみをチェックしているため、最初のメッセージを編集してもメッセージが消えることはありません。代わりに、両方を確認できます。

また、キーアップを使用するのは面倒で混乱しやすいため、onblurを使用して、ユーザーがフィールドを離れたとき（つまり、フィールドがフォーカスを失ったとき、つまりぼかし）を検証することを検討できます。

より洗練されたものが必要な場合は、キー入力方法を使用して、ユーザーが入力している間にメッセージを消去するか、キーストロークごとにリセットするタイマーでもう一度確認することもできます...

または、HTML5検証を使用できます。なぜですか？

---

JavaScriptライブラリ thoth を更新して、最小長検証をサポートしました。また、thothを使用したフォーム検証を容易にするヘルパーライブラリを公開しました。場合によっては、微調整が必​​要になる場合があります。特に、ローカライズのメカニズムが含まれていません。

Thothを使用して、次のようにコードを実装できます。注：コードにライブラリを追加する場合は、ライブラリをダウンロードしてください。

トートは、この検証がIE8以降で機能することを確認し、javascriptが利用できない場合、HTML5フォーム検証に低下します。クライアントは常にJavaScriptとHTMLコードを操作できるため、サーバーで検証を繰り返します。

.valid
{
    color: #66cc66;
}
.invalid
{
    color: #ff6666;
}

<!DOCTYPE html>
<head>
        <title>Demo</title>
        <script src="https://rawgit.com/theraot/thoth/master/thoth.js"></script>
        <script src="https://rawgit.com/theraot/thoth/master/form_helper.js"></script>
</head>
<form data-on-valid="document.getElementById('ok').style.display='';" data-on-invalid="document.getElementById('ok').style.display='none';" data-lacking="you have to enter at least 6 digit!" data-lacking-class="invalid">
<input name="password" type="password" placeholder="password" id="pass1" minlength="6" required="required"/>
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" minlength="6" data-validate="match(@#pass1)" required="required"/>
</form>
<div id="ok" class="valid" style="display:none">ok!</div>

ここにはdata-属性がかなりあります。詳細を説明します。

• data-on-valid：フォームが正しく検証されたときに実行されるコード。
• data-on-invalid：フォームが検証されないときに実行されるコード。
• data-lacking：十分な文字がない場合に使用する文字列形式。同様に、data-remainingとdata-excessは、maxlengthに到達する前に空きがある場合、およびテキストがmaxlengthを超える場合に機能します。
• data-lacking-class：不足しているメッセージに使用するcssクラス。同様にdata-remaining-classとdata-excess-classが存在します。

上記はヘルパーライブラリform_helper.csによって追加されます。ライブラリthothからは、以下のみが使用されます。

• data-validate：追加の検証。この場合、両方のフィールドが一致することを検証する検証を追加するために使用されます。

ドキュメントが不足してすみません。

注：data-on-validおよびdata-on-invalidは適切なイベントではありません。

Answer 18

これが作業コードです。変更pass1.lengthからpass1.value.lengthおよび検証に基づいて両方のテキストフィールドの色を更新します。

<html>

<head>
    <script>
    function checkPass() {
        var pass1 = document.getElementById('pass1');
        var pass2 = document.getElementById('pass2');
        var message = document.getElementById('error-nwl');
        var goodColor = "#66cc66";
        var badColor = "#ff6666";
        if (pass1.value == pass2.value) {
            pass2.style.backgroundColor = goodColor;
            pass1.style.backgroundColor = goodColor;
            message.style.color = goodColor;
            message.innerHTML = "ok!"
        } else {
            pass2.style.backgroundColor = badColor;
            message.style.color = badColor;
            message.innerHTML = " These passwords don't match"
        }

        if (pass1.value.length > 5 && pass1.value == pass2.value) {
            pass1.style.backgroundColor = goodColor;
            pass2.style.backgroundColor = goodColor;
            message.style.color = goodColor;
            message.innerHTML = "character number ok!"
        } else {
            pass1.style.backgroundColor = badColor;
            message.style.color = badColor;
            message.innerHTML = " you have to enter at least 6 digit!"
        }

    }
    </script>

</head>

<body>
  <input name="password" type="password" placeholder="password" onkeyup="checkPass();" id="pass1" />
  <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass();  return false;" />
  <div id="error-nwl"></div>
</body>
</html>

Answer 19

このコードは、入力中に両方のフィールドを検証します。

<!DOCTYPE html>
<html>

<body>

    <input name="password" type="password" placeholder="password" id="pass1" onkeyup="setStyle(this,document.getElementById('pass2'));" />
    <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="setStyle(this,document.getElementById('pass1'));" />
    <div id="error-nwl"></div>


    <script>
      function isValidLength(element) {
          return (element.value.length > 5);
      }

      function isEqual(element1, element2) {
          if (element1.value.length > 0 && element2.value.length > 0)
              return (element1.value == element2.value);
          return true;
      }

      function setStyle(element, element2) {
          var message = document.getElementById('error-nwl');
          var goodColor = "#66cc66";
          var badColor = "#ff6666";
          var isValidPWD = isValidLength(element) && isEqual(element, element2);

          if (isValidPWD) {
              if (isValidLength(element)) {
                  element.style.backgroundColor = goodColor;
                  message.style.color = goodColor;
                  message.innerHTML = "character number ok!"
              }
              if (isEqual(element, element2)) {
                  element.style.backgroundColor = goodColor;
                  message.style.color = goodColor;
                  message.innerHTML = "ok!"
              }
          } else {
              if (!isValidLength(element)) {
                  element.style.backgroundColor = badColor;
                  message.style.color = badColor;
                  message.innerHTML = " you have to enter at least 6 digit!"
              }

              if (!isEqual(element, element2)) {
                  element.style.backgroundColor = badColor;
                  message.style.color = badColor;
                  message.innerHTML = " These passwords don't match"
              }
          }
      }
  </script>


</body>

</html>

Answer 20

DOMのロード後にイベントリスナをコード内の要素に割り当てる方がよいので、getElementByIdへの複数の呼び出しを省略できますが、とにかくこれは修正されたコードです。

var goodColor = "#66cc66", badColor = "#ff6666";

function checkPass() {
  
  message = document.getElementById('error-nwl');
  pass1 = document.getElementById('pass1');
  pass2 = document.getElementById('pass2');

  if (pass1.value.length > 5) {
    pass1.style.backgroundColor = goodColor;
    message.style.color = goodColor;
    message.innerHTML = "character number ok!"

    if (pass2.value == pass1.value) {
      pass2.style.backgroundColor = goodColor;
      message.style.color = goodColor;
      message.innerHTML = "ok!"
    }
    else {
      pass2.style.backgroundColor = badColor;
      message.style.color = badColor;
      message.innerHTML = " These passwords don't match"
    }

  }
  else {
    pass1.style.backgroundColor = badColor;
    message.style.color = badColor;
    message.innerHTML = " you have to enter at least 6 digit!"
  }

}  

<input name="password" type="password" placeholder="password" id="pass1" onkeyup="checkPass()" />
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass()" />
<div id="error-nwl"></div>

Answer 21

このジョブを実行するには、2つの関数を使用できます。

checkPass1（）は、パスワードが十分に長いかどうか天気をチェックします。 checkPass2（）は、これらのパスワードが一致するかどうかを確認します。一部のユーザーが最初に＃pass2を埋める場合、checkPass2（）をcheckPass1（）に追加します。

function checkPass1() 
{
    var pass1 = document.getElementById('pass1');
    var message = document.getElementById('length-error');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    var normalColor = "#ffffff"
    if (pass1.value.length <= 5)
    {
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
    else
    {
        pass1.style.backgroundColor = normalColor;
        message.style.color = goodColor;
        message.innerHTML = " the length of password is long enough";
    }
    checkPass2();
}
function checkPass2()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('confirm-error');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    if(pass1.value == pass2.value)
    {
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }
    else
    {
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
}

<input name="password" type="password" placeholder="password"  id="pass1" onkeyup="checkPass1()"/>
    <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass2()" />
    <div id="length-error"></div>
    <div id="confirm-error"></div>

Answer 22

validform.jsを使用できます。

例えば：

<script type="text/javascript" src="http://validform.rjboy.cn/wp-content/themes/validform/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://validform.rjboy.cn/Validform/v5.1/Validform_v5.1_min.js"></script>
<script>
$(".demoform").Validform();

</script>
<form class="demoform">
<input type="password" value="" name="userpassword" datatype="*6-15" errormsg="Password range between 6~15 bits!" />
<input type="password" value="" name="userpassword2" datatype="*" recheck="userpassword" errormsg="The account passwords you entered for the two time were not consistent." /></form>

Answer 23

イベントの可能性とイベントの順序には多くの可能性があることに留意する必要があります。

if(user>0 and user<5){//output username should be 6}
if(pass>0 and pass<5){//output password should be 6}
if(user>5 and pass>5){
    if(user==pass){//password match}
    else{//invalid password}
}

私はあなたのコードを修正して回避策を取りました

function checkPass() {
  var pass1 = document.getElementById('pass1');
  var pass2 = document.getElementById('pass2');
  var message = document.getElementById('error-nwl');
  var goodColor = "#66cc66";
  var badColor = "#ff6666";

  if (pass1.value.length > 5) {

    pass1.style.backgroundColor = goodColor;
    message.style.color = goodColor;
    if (pass1.value == pass2.value) {
      pass1.style.backgroundColor = goodColor;
      pass2.style.backgroundColor = goodColor;
      message.style.color = goodColor;
      message.innerHTML = "ok!";
    } else {
      if (pass2.value.length > 0) {
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match";
      }
    }
  } else {
    if (pass1.value.length <= 5 && pass1.value.length > 0) {
      pass1.style.backgroundColor = badColor;
      message.style.color = badColor;
      message.innerHTML = " you have to enter at least 6 digit user!";
      if (pass2.value.length > 0) {
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
      }
    }
    if (pass2.value.length <= 5 && pass2.value.length > 0) {
      pass2.style.backgroundColor = badColor;
      message.style.color = badColor;
      message.innerHTML = " you have to enter at least 6 digit pass!"
    }
  }

}

<html>

<body>
  <input name="password" type="password" placeholder="password" onkeyup="checkPass();" id="pass1" />
  <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass();" />
  <div id="error-nwl"></div>
</body>

</html>

あるいは、両方のフィールドでonkeyupメソッドを呼び出し、フィールドを検証するための異なる関数を記述することでこれを行うことができます。これにより、柔軟性が確保され、ほとんどの場合に回避できます。また、onBlurなどの他のイベントを追加して、ユーザーがフォーカスを移動したタイミングをテストすることもできます。

これがあなたの質問に答えることを願っています

Answer 24

これを試してみてください！

function resetcol() 
{
    pass1.style = "";
    pass2.style = "";

}

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    if (pass1.value == pass2.value && pass1.value.length > 5){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }
        else{
        pass1.style = 
        message.style.color = badColor;
        message.innerHTML = "Bad input. your passwords must match, and be at least 6 characters long."
    }
                
}  

         <input name="password" type="password" placeholder="password"  id="pass1" onkeyup="resetcol();"/>
         <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="resetcol();" onchange="checkPass(); return false;" />
                  <div id="error-nwl"></div>
        

Answer 25

2番目のif elseブロックを最初のifに移動して、必要なものを取得できます。 pass1.lengthをpass1.value.lengthに変更する必要もあります。

また、両方の入力ボックスの変更を確認する必要があると思います。そうしないと、ユーザーは最初の入力ボックスに戻ってパスワードを変更でき、チェック状態は更新されません。

更新されたコードは次のとおりです。

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
        
    if(pass1.value.length > 5){
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        //message.innerHTML = "character number ok!"
        if(pass1.value == pass2.value) {
            pass2.style.backgroundColor = goodColor;
            message.style.color = goodColor;
            message.innerHTML = "Ok!"
        }
        else{
            pass2.style.backgroundColor = badColor;
            message.style.color = badColor;
            message.innerHTML = "These passwords don't match!"
        }
    }
    else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = "You have to enter at least 6 digits!"
    }
}  

<input name="password" type="password" placeholder="password"  id="pass1" onkeyup="checkPass(); return false;"/>
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
<div id="error-nwl"></div>