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

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

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

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

这是使用类的一种更简单的方法：

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