Question

我在javascript中编写了一个函数来判断两个字段是否相同：
javascript代码：

function validate();{
var x= getElementByName("password");
var y= getElementByName("retype_password");
if(x==y) return;
else alert("password not same");

HTML代码：我如何在HTML代码中调用上面的书面功能

password : <input type= "password" name="password"> <br><br>
retype password : <input type="password" name="retype_password" > <br><br>

提前致谢

Answer 1

请注意JavaScript中的方法名称。按名称选择元素的正确方法是document.getElementsByName，它返回NodeList。因此，为了获得具有所需名称的第一个字段，您应该将结果视为数组：

function validate() {
    var x = document.getElementsByName('password')[0].value,
        y = document.getElementsByName('retype_password')[0].value;

    if (x === y) {
        return true;
    }

    alert('password not same');
    return false;
}

要使解决方案正常工作，您必须将验证功能绑定为<form> 提交事件（作为示例）：

var form = document.getElementById('myform');
form.addEventListener('submit', function() {
    return validate();
}, false);

或缩短为：

document.getElementById('myform').addEventListener('submit', validate, false);

如果您没有表单并使用某些类似按钮的元素，则可以绑定单击事件，例如：

var mybutton = document.getElementById('mybutton');
mybutton.addEventListener('click', function() {
    if ( validate() ) {
        // do AJAX request or whatever...
    }
}, false);

Answer 2

password : <input type= "password" id="password" onblur="validate()"> <br><br>
retype password : <input type="password" id="retype_password"  onblur="validate()"> <br><br>

<script>
function validate() {
var x= document.getElementById("password");
    var y= document.getElementById("retype_password");
if(x.value==y.value) return;
else alert("password not same");
}
</script>

Answer 3

他们有多种方法可以调用此功能。

您可以添加新按钮：

<input type = 'button' value = 'validate' onclick = 'validate()' />

或者当焦点在文本字段上时调用该函数：

<input type="password" name="retype_password" onblur = 'validate()'  > <br><br>

他们还有其他方法（onkeydown，onchange ...）查看JS活动以了解更多信息：http://www.w3schools.com/jsref/dom_obj_event.asp

Answer 4

您必须使用getElementById而不是getElementByName 的使用Javascript：

function validate() { var x = getElementById("password").value; var y = getElementById("retype_password").value; if(x==y) { return true; } else { alert("password not same"); return false; } }

和html：

<form onsubmit="return validate();" action="submit_path" > <input type= "password" id="password" name="password"> <input type= "password" id="retype_password" name="retype_password"> <input type="submit" name="submit" value="Submit" > </form>

Answer 5

来自@VisioN的正确代码：

function validate(event) {
    var x = document.getElementsByName('password')[0].value,
        y = document.getElementsByName('retype_password')[0].value;

    if (x === y) {
        return true;
    } else {
        alert('password not same');
        event.preventDefault();
        return false;
    }
}

在提交按钮上添加onclick="validate(event);"属性。（如果validate返回false，则使用event.preventDefault（）;）阻止事件冒泡。

修改

也许最好将它绑定到onSubmit事件。 <form onsubmit="validate(event)">

阿波罗

Answer 6

使用class：

是一种更简单的方法

password : <input type= "password" class="passwords" name="password"> <br><br>
retype password : <input type="password" class="passwords" name="retype_password" > <br><br>

在你的javascript中：

var passwords = document.getElementsByClassName("passwords");

function validate(){
var first = passwords[0].value;
var second = passwords[1].value;

   if(first != second){
      //Invalid
   } else{
      //Valid
   }
}

如何使用确认密码字段检查密码字段

6 个答案: