使用javascript检查两个字段是否具有相同的值_Javascript_Html

使用javascript检查两个字段是否具有相同的值

javascript html

使用javascript检查两个字段是否具有相同的值,javascript,html,Javascript,Html,我想做一个注册表单，表单应该有两个密码字段，所以没有混淆。因此，如果密码相同，则字段右侧应有一个绿色块，如果没有，则应有一个红十字。这是我的测试代码，但它不起作用 <script language="javascript" type="text/javascript"> function check() { var loc; if (test.name1.value == test.name2.value) { loc = "/img/green

我想做一个注册表单，表单应该有两个密码字段，所以没有混淆。
因此，如果密码相同，则字段右侧应有一个绿色块，如果没有，则应有一个红十字。

这是我的测试代码，但它不起作用

<script language="javascript" type="text/javascript">
function check()
{
    var loc;
    if (test.name1.value == test.name2.value) {
        loc = "/img/greenbock.jpg";
    }
    if (test.name1.value != test.name2.value) {
        loc = "/img/redcross.jpg";
    }
    return loc;
}
</script>
</head>

<body>
<form name="test" method="post" action="">
Name<br />
<input name="name1" type="text" /><br />
Name agian<br />
<input name="name2" type="text" onblur="check()" />
<script language="javascript" type="text/javascript">
if(loc != "")
{
document.write("<div style=\"height:19px; width:20px; background-image:url("+ loc + ")\"></div>");
}
</script>
<br />
Username<br />
<input name="username" type="text" /><br />


函数检查（）
{
var-loc；
if（test.name1.value==test.name2.value）{
loc=“/img/greenbock.jpg”；
}
if（test.name1.value！=test.name2.value）{
loc=“/img/redcross.jpg”；
}
返回loc；
}
名称



名称agian

如果（loc！=“”）
{
文件。填写（“”）；
}


用户名

那么我错在哪里呢？一点小毛病，还是我应该把所有的东西都抹掉

[编辑]

现在我已经设置了check函数，以便在输入后运行脚本。所以现在它也在做同样的事情，因为一切都会消失。。解决方案？

试试这个，

document.test.name1.value

或

document.forms[“test”][“name1”].value

而不是

test.name1.value

应该是

 var loc;
 var name1=document.forms["test"]["name1"].value;
 var name2=document.forms["test"]["name2"].value;

 if(name1== name2){
    loc = "/img/greenbock.jpg";
  }else {
    loc = "/img/redcross.jpg";
 }

我的建议是使用CSS控制错误/成功图像的样式。然后，验证函数可以决定将哪个CSS类分配给位于输入字段旁边的

此外，如果用户稍后返回任一字段并进行更改，则需要将

check（）

添加到其他名称输入中

CSS HTML 当然，这比以前的代码多得多，但是您可以很容易地将其转换为可重用的函数

您是否检查了浏览器控制台中的错误？这几乎是您应该做的第一件事。

check（）

可能应该负责用图像绘制div。现在，您将永远看不到图像，因为在

check（）

运行之前，输入字段下面的脚本已经运行过了。

/* Shared styling */
.validation-image {
    height:19px; 
    width:20px;
    display: none;
}

/* Error styling */
.validation-error {
    background-color: #ff0000;
    background-image: url('/img/redcross.jpg');
}

/* Success styling */
.validation-success {
    background-color: #00ff00;
    background-image: url('/img/greenbock.jpg');
}

<form name="test" method="post" action="">Name
    <br />
    <input name="name1" type="text" onblur="checkNames()" />
    <br />Name agian
    <br />
    <input name="name2" type="text" onblur="checkNames()" />
    <div id="nameValidation" class="validation-image"></div>
    <br />Username
    <br />
    <input name="username" type="text" />
    <br />
</form>

function checkNames() {
    // Find the validation image div
    var validationElement = document.getElementById('nameValidation');
    // Get the form values
    var name1 = document.forms["test"]["name1"].value;
    var name2 = document.forms["test"]["name2"].value;
    // Reset the validation element styles
    validationElement.style.display = 'none';
    validationElement.className = 'validation-image';
    // Check if name2 isn't null or undefined or empty
    if (name2) {
        // Show the validation element
        validationElement.style.display = 'inline-block';
        // Choose which class to add to the element
        validationElement.className += 
            (name1 == name2 ? ' validation-success' : ' validation-error');
    }
}