HTML表单客户端验证

Question

I'm quite new to the javascript scene not to mention working with it on a rails application. 我对javascript场景很陌生，更不用说在Rails应用程序中使用它了。 So i decided to do a client side validation of my signup form everything works ok but my script for checking if password matches confirm password. 因此，我决定对我的注册表单进行客户端验证，一切正常，但是我用于检查密码是否匹配的脚本确认了密码。 Everytime it tells me password does not match i was really hoping someone could help me with this. 每当它告诉我密码不匹配时，我真的希望有人可以对此提供帮助。 Thanks in advance :) PS this is mostly html and javascript 在此先感谢:) PS这主要是html和javascript

     <head>
    <form id="sign_up" method="post" action="/auth/identity/register">   
      <div class="field"> 
        <input id="name" class="username" type="text" placeholder="Full name" name="name" required></input>
     </div>
     <div class="field"> 
        <input id="email" class="username" type="email" placeholder="Email address" name="email" required></input>
     </div>
     <div class="field"> 
        <input id="password" class="username" type="password" placeholder="Password" name="password" required></input>
    </div>
    <div class="field"> 
    <input id="password_confirmation" class="username" type="password" placeholder="Password confirmation" name="password_confirmation" required></input>
    </div>

      <div class="field"> 
        <input class="btn btn-primary" type="submit" value="Sign up" name="commit"></input>
      </div>

     </form>
<script type="text/javascript">
window.onload = function () {
    document.getElementById("password").onchange = validatePassword;
    document.getElementById("password_confirmation").onchange = validatePassword;

}
function validatePassword(){
var pass2=document.getElementById("password_confirmation").value;
var pass1=document.getElementById("password").value;
if(pass1!=pass2){
    document.getElementById("password_confirmation").setCustomValidity("Passwords Don't Match");

}
else
    document.getElementById("password_confirmation").setCustomValidity(''); 
//empty string means no validation error
}

</script>
  </div>
</head>

Answer 1

As the commenters have said, your code works when you move it into the <body> of the document. 正如评论者所说，将代码移到文档的<body>中时，代码即可工作。 Perhaps there's more than one element with ID password or password_confirmation within the document? 也许文档中有多个ID password或password_confirmation元素？

If not I would start by logging the entered password and password_confirmation values, ie: 如果没有，我将首先记录输入的password和password_confirmation值，即：

console.log("Password box value: "+pass1);
console.log("Password confirmation box value: "+pass2);

Put these lines below the line var pass1=document.getElementById("password").value; 将这些行放在var pass1=document.getElementById("password").value;

Then you can visually inspect the entered values in your browser console ( F12 key) to make sure they're the same. 然后，您可以在浏览器控制台中目视检查输入的值（ F12键）以确保它们相同。 Check the values just after you click the submit button. 单击提交按钮后立即检查值。 Bear in mind you're binding the onchange event to the inputs so you'll see logging when you move from the password input to the password confirmation input (you can ignore this as you won't yet have entered the confirmation password). 请记住，您将onchange事件绑定到了输入，因此当您从密码输入转到密码确认输入时，您会看到日志记录（您可以忽略此操作，因为您尚未输入确认密码）。

Finally, it's worth bearing in mind that Firefox behaves slightly differently to Chrome in terms of user feedback; 最后，值得注意的是，就用户反馈而言，Firefox的行为与Chrome略有不同。 Firefox puts a red glow around the offending text input as you type, which disappears when the password entered in the password confirmation input is the same. 当您键入时，Firefox会在令人讨厌的文本输入周围放红光，当在密码确认输入中输入的密码相同时，该符号会消失。 Chrome does not do this and only gives indication that the passwords didn't match after you click the submit button. Chrome不会执行此操作，只会在您单击“提交”按钮后指示密码不匹配。

HTML表单客户端验证

问题描述

1 个解决方案

解决方案1
0 2014-03-29 11:52:45

HTML表单客户端验证

问题描述

1 个解决方案

解决方案1 0 2014-03-29 11:52:45

解决方案1
0 2014-03-29 11:52:45