Question

我以前没有真正使用过JavaScript，但我正在尝试验证表单元素，因为它们正在填写。我有一个X和一个Check标记，我试图在该字段旁边显示它是否有效。我知道这部分是正确的，因为我可以使用警报，但我不知道如何更改图形的字段。

JavaScript：

function validate_field(field)
{
    var value = document.newAccount.fname;
    if (value==null||value=="")
    {
        document.fnameX.visibility = visible;
        document.fnameOK.visibility = hidden;
       //alert("FAIL");
       return false;
    }
    else
    {
        document.fnameX.visibility = hidden;
        document.fnameOK.visibility = visible;
      //alert("TRUE");
      return true;
    }
}

部分HTML：

  <form action="XXXXX" method="post" name="newAccount">

    <table width="78%" border="0" align="center">
          <tr>
         <td colspan="2"><strong>Personal Info:</strong> </td>
          </tr>
          <tr>
            <td width="24%"><div align="right">First Name: </div></td>
            <td width="76%">
              <input type="text" onchange="return validate_field(this)"  onfocus="return validate_field(this)" name="fname" tabindex="1" size="50"/> 
              <img name="fnameX" src="redx.jpg" style="visibility:hidden" alt="X" width="18" height="18" /><img name="fnameOK" src="checkmark.jpg" style="visibility:hidden"  alt="Ok" width="18" height="18" /></td>
          </tr>
          <tr>
            <td><div align="right">Last Name: </div></td>
            <td><input type="text" name="lname" tabindex="2" size="50"/></td>
          </tr>
    </table>
    </form>

Answer 1

你可能最好使用CSS类来做这样的事情。

.valid
{
     padding-right:15px 
     /*or whatever the width of your graphic is*/
     background:url('checkmark.jpg') center right no-repeat; 
     /*remember that the url is relative to the stylesheet*/
}

.invalid
{
     padding-right:15px 
     background:url('redx.jpg') center right no-repeat; 
}

然后您的验证功能变为：

function validate_field(field)
{
    var value = field.value;
    if (value==null||value=="")
    {
       field.parentNode.className = 'invalid';
       return false;
    }
    else
    {
       field.parentNode.className = 'valid';
       return true;
    }
}

编辑：

请记住保持可访问性，除非您使用警报或使用ARIA属性访问通知，否则使用辅助设备的用户将很难处理您的表单。

修改

Here是您的代码中的一个工作示例，我在其中更改了表单输入的父表格单元格的背景颜色。

修改

here是一个例子，我摆脱了那些不太好的布局表并用fieldset替换它们，并稍微修改了Javascript。如果您不熟悉jsbin，可以将/edit附加到网址以查看/修改代码like so。

使用JavaScript验证表单数据和显示图形

1 个答案: