Question

我是网络编程和脚本编程的新手;我有一个要求，我必须动态显示由输入文本框上的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>

Answer 1

您的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;
}

使用javascript在输入上显示动态验证消息（基于图像）的方法

1 个答案: