Question

我想制作一个注册表单，表单应该有两个密码字段，所以没有混淆。
因此，如果密码相同，那么该字段应该有一个绿色的块，如果没有，那么应该有一个红色的叉子。

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

<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 />

那我在哪里错了？一点点的错误，或者，我应该把一切都带走吗？

[编辑]
现在我已设置check-function以在输入后运行脚本。所以现在它做同样的事情，因为一切都消失了......解决方案？

Answer 1

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

此外，您需要将check()添加到其他名称输入，以防用户稍后返回任一字段并进行更改。

CSS

/* 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');
}

HTML

<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>

的JavaScript

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');
    }
}

当然，这是比以前更多的代码，但你可以很容易地把它变成一个可重复使用的功能。

jsFiddle Demo

Answer 2

试试这个，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";
 }

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

2 个答案:

CSS

HTML

的JavaScript