2016-07-29 34 views
0

我写了几个函数来检查两个密码是否相等。我先输入两个密码。当我点击“验证密码”框时,它应该显示“密码匹配”或“需要第二次尝试,请再次在第一个密码框中输入您的密码,因为这两个密码不匹配”,具体取决于无论密码是否相等。如果两个密码不相同,则显示消息“需要第二次尝试,因为两个密码不匹配,请再次在第一个密码框中输入密码”。我还希望第一个密码框(password1)变成空白(我希望它重置),以及两个密码不匹配时。但是,这在我的代码中不起作用。我在这里做错了什么?如何重置文本框并使文本框中的值等于“”(或空白)? (javascript)

我用了一个password.js文件和一个setpassword.html文件。

我password.js文件是这样的:

var verifypasswordclick = document.getElementById("txtPWVerified"); 

function verifypassword1() { 
    var password1 = document.getElementById("txtPassword").value; 
    var verifypassword = document.getElementById("txtPWVerified").value; 
    if(password1 == '' || verifypassword == '') { 
     return null; 
    } 
    if(password1 == verifypassword) { 
     alert('The passwords match'); 
    } 
    if(password1 !== verifypassword || password1 == "" || verifypasword == "") { 
     alert("A second try is needed. Please enter your password in the first password box again because the two passwords don't match"); 
    } 
    if(password1 !== verifypassword || password1 == "" || verifypasword == "") { 
     password1 = ""; 
    } 
} 
verifypasswordclick.addEventListener("blur",verifypassword1); 

我setpassword.html文件是这样的:

<!DOCTYPE html> 
<!-- H5FormValidation.html --> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Register Here</title> 
</head> 

<body> 
    <h2>Register Here</h2> 

    <form id="formTest" method="get" action="processData"> 
    <table> 

    <tr> 
     <td><label for="txtEmail">Email<span class="required">*</span></label></td> 
     <td><input type="email" id="txtEmail" name="email" required></td> 
    </tr> 
    <tr> 
     <td><label for="txtPassword">Password<span class="required">*</span></label></td> 
     <td><input type="password" id="txtPassword" name="password" required></td> 
    </tr> 
    <tr> 
     <td><label for="txtPWVerified">Verify Password<span class="required">*</span></label></td> 
     <td><input type="password" id="txtPWVerified" name="pwVerified" required></td> 
    </tr> 

    <tr> 
     <td>&nbsp;</td> 
     <td> 
      <input type="reset" value="CLEAR" id="btnReset"></td> 
    </tr> 
    </table> 
    </form> 
<script src = "password.js"></script> 
</body> 
</html> 
+1

'的document.getElementById( “txtPassword”)值= '';' – Amit

+0

谢谢!你的代码有效,但我想知道为什么你需要再次获取这个值,如果我已经定义了password1。 –

+0

@MichaelBao字符串在JavaScript中传递值,所以如果你引用一个字符串并对其进行修改,它将不会修改原始字符串。当你存储'password1'时,你创建了该值的一个副本。 – kamoroso94

回答

0

你只需要设置的密码元素的值(感谢ID的元素)

document.getElementById("txtPassword").value = ''; 
0

更改你的password.js代码如下。 // PS:它不是非常用户friendy使用警报

var verifypasswordclick = document.getElementById("txtPWVerified"); 
function verifypassword1() { 
     var password1 = document.getElementById("txtPassword") 
     var verifypassword = document.getElementById("txtPWVerified"); 
     //do nothing until the fields is field 
     if(password1.value && verifypassword.value){ 
      if(password1.value === verifypassword.value) { 
       alert('The passwords match'); 
      }else{ 
       alert("A second try is needed. Please enter your password in the first password box again because the two passwords don't match"); 
       password1.value= ""; 

      } 
     } 
    } 
verifypasswordclick.addEventListener("blur",verifypassword1); 

好运

相关问题