0

我是网络编程和脚本的新手；我有一个要求，我必须在输入文本框上动态显示由 onblur 或 onchange 等事件触发的验证消息。对我来说具有挑战性的部分是，共有 5 个验证应用于相同的输入，我必须同时以静态列表的形式在右侧显示所有验证的结果。列表中的每条消息前面都会有一个绿色检查图像（用于有效验证）和红色检查图像（用于无效验证）。列表中的消息数量是固定的，唯一的事情是在每条消息之前切换图像（红色/绿色勾号），取决于相应的验证是否通过或不。我正在考虑以下方法：我制作了 CSS 10 个 div，每个有效检查图像 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 回答