0

私はWebプログラミングとスクリプティングに不慣れです。onblurやonchangeなどのイベントによってトリガーされた検証メッセージを入力テキストボックスに動的に表示する必要があるという要件があります。私にとって難しいのは、同じ入力に合計5つの検証が適用され、すべての検証の結果を静的リストの形式で右側に同時に表示する必要があることです。リスト内の各メッセージの前には緑色のチェックが表示されます。画像（有効な検証用）と赤いチェック画像（無効な検証用）リスト内のメッセージの数は固定されており、対応する検証に合格したかどうかに応じて、各メッセージの前に画像（赤/緑のチェックマーク）を切り替えるだけです。か否か。私は次のアプローチを考えています。CSSを10divにし、有効なチェック画像をそれぞれ5つ、無効なクロス画像を5つ作成しました。

問題は、コードが修正され、制限されていることです。しかし、それは私の目的を解決します。その長くて厄介なことに、データ構造を使用しませんでした。知識が限られているためです。誰かがこれにもっと良く効果的な方法でアプローチする方法を教えてもらえますか？

**CSS CODE**

#divRule10
{
background-image: url('common/images/invalid_rule.png') ;
width:16px;
height:16px;
}
#divRule11
{
background-image: url('common/images/valid_rule.png') ;
width:16px;
height:16px;
}
#divRule20
{
background-image: url('common/images/invalid_rule.png') ;
width:16px;
height:16px;
}
#divRule21
{
background-image: url('common/images/valid_rule.png') ;
width:16px;
height:16px;
}
#divRule30
{
background-image: url('common/images/invalid_rule.png') ;
width:16px;
height:16px;
}
#divRule31
{
background-image: url('common/images/valid_rule.png') ;
width:16px;
height:16px;
}
#divRule40
{
background-image: url('common/images/invalid_rule.png') ;
width:16px;
height:16px;
}
#divRule41
{
background-image: url('common/images/valid_rule.png') ;
width:16px;
height:16px;
}
#divRule50
{
background-image: url('common/images/invalid_rule.png') ;
width:16px;
height:16px;
}
#divRule51
{
background-image: url('common/images/valid_rule.png') ;
width:16px;
height:16px;
}

**JS CODE**

  function errorMessage()
      {



      var valuePassword=document.getElementsByName("newpwd")[0].value;

      if(valuePassword.length<8)
      {

      document.getElementById('divRule10').style.display='';
       document.getElementById('divRule11').style.display='none';
     // alert("Error: password must contain at least 8 chars"); 
      }
      else
      {
      document.getElementById('divRule11').style.display='';
       document.getElementById('divRule10').style.display='none';

      }
     re = /[0-9]/;
      if(!re.test(valuePassword)) 
      { 
      document.getElementById('divRule20').style.display='';
       document.getElementById('divRule21').style.display='none';

      } 
      else
      {
      document.getElementById('divRule21').style.display='';
       document.getElementById('divRule20').style.display='none';

      }
      re = /[!@#\$%]/; 
      if(!re.test(valuePassword)) { 
     document.getElementById('divRule30').style.display='';
      document.getElementById('divRule31').style.display='none';

      } 
      else
      {
      document.getElementById('divRule31').style.display='';
       document.getElementById('divRule30').style.display='none';

      }
      re= /\s/g;

     if(re.test(valuePassword))
      {
      document.getElementById('divRule50').style.display='';
       document.getElementById('divRule51').style.display='none';

       }
       else
      {
      document.getElementById('divRule51').style.display='';
       document.getElementById('divRule50').style.display='none';

      }


       if(null==(valuePassword.match(/^[A-Za-z0-9].+$/)))
       {
        document.getElementById('divRule40').style.display='';
         document.getElementById('divRule41').style.display='none';
            //alert(' Error: 1st letter must be a letter');
       }
       else
       {


       document.getElementById('divRule41').style.display='';
       document.getElementById('divRule40').style.display='none';

       }
    }
</script>




**HTML CODE**

<html:password property="newpwd"  size="20" maxlength="15" onblur="restore(),errorMessage()"   name="ChangePwdForm" styleClass="loginUserId"></html:password>


<table>

            <tr>
            <td>
            <div id="divRule10" style="display:none;">

            </div>
            <div id="divRule11" style="display:none;">

            </div>
            </td>
            <td>
            Must be of atleast 8 characters.
            </td>
            </tr>
            <tr>
            <td>
            <div id="divRule20" style="display:none;">

            </div>
            <div id="divRule21" style="display:none;">

            </div>
            </td>
            <td>
            Atleast 1 number
            </td>
            </tr>
            <tr>
            <td>
            <div id="divRule30" style="display:none;">

            </div>
            <div id="divRule31" style="display:none;">

            </div>
            </td>
            <td>
            Atleast 1 special character
            </td>
            </tr>
            <tr>
            <tr>
            <td>
            <div id="divRule40" style="display:none;">

            </div>
            <div id="divRule41" style="display:none;">

            </div>
            </td>
            <td>
            Begin with letter or number
            </td>
            </tr>
            <tr>
            <tr>
            <td>
            <div id="divRule50" style="display:none;">

            </div>
            <div id="divRule51" style="display:none;">

            </div>
            </td>
            <td>
            Cannot have spaces.
            </td>
            </tr>



            </table>
4

1 に答える 1

0

JavaScriptの検証：

function validate (element_id) {

    // element
    el = document.getElementById(element_id);

    // validation sign
    el_sign = document.getElementById(element_id + '_sign');

    // do some validations here and ...
    if (valid == true)
        el_sign.className = 'valid';
    else
        el_sign.className = 'invalid';

}

HTMLコード：

// element 1, validation sign
<div id="el_1_sign"></div>

// element 1
<input id="el_1" type="text">

// element 2, validation sign
<div id="el_2_sign"></div>

// element 2
<input id="el_2" type="text"> 

// continue ...

CSSコード：

.valid {
    background-image: url('common/images/valid_rule.png') ;
    width:16px;
    height:16px;
}

.invalid {
    background-image: url('common/images/invalid_rule.png') ;
    width:16px;
    height:16px;
}
于 2012-10-01T07:00:43.663 に答える