如何使用確認密碼字段檢查密碼字段

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