代码之家 › 专栏 › 技术社区 › Josh Curren

用javascript验证表单数据并显示图形

graphics html javascript

Josh Curren · 技术社区 · 16 年前

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

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>

1 回复 | 直到 16 年前

Ryan Lynch 16 年前

你最好用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 到要查看/修改代码的URL, like so .

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

11 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

11 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

11 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

11 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

11 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

12 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前