JavaScript表单验证不成功

Question

在简单的HTML表单上练习我的Javascript。 在一个框中输入密码，在第二个框中再次输入以确认。 密码应包含6个字符（包括1个数字），并且不能包含空格。 如果密码符合条件并匹配，则会弹出一条警告消息。

我大部分都在那儿，如果不符合条件，则会弹出错误消息，但我无法提醒“成功！” 我玩弄了if语句的方式很多，我不确定自己缺少什么。 有什么建议么？

Javascript：

window.onload = function() {                

            document.getElementById('submit').addEventListener('click', validateInput);
        }

        var userPass = document.getElementById('password').value;
        var confirmPass = document.getElementById('confirm_password').value;

        function validatePassword() {
            var userPass = document.getElementById('password').value;

            if (userPass.length == 0) { // Nothing was entered
                document.getElementById('password_error').innerHTML = 'Please enter a password';
            } else if (userPass.length < 6) { // Less than 6 chars 
                document.getElementById('password_error').innerHTML = 'Your password must be at least 6 characters in length'; 
            } else if (userPass.match(/\s/)) { // contains a space
                document.getElementById('password_error').innerHTML = 'Your password cannot contain spaces';
            } else if (!userPass.match(/\d/)) { // Does not contain a number
                document.getElementById('password_error').innerHTML = 'Your password must contain a number';
            } else if (userPass !== confirmPass) {
                document.getElementById('confirm_error').innerHTML = 'Passwords do not match. Please check again.';             
            } else {
                document.getElementById('password_error').innerHTML = "";
                document.getElementById('confirm_error').innerHTML = "";
                alert("Success!");  
                clearFields();
            }
        }

        function validateConfirm() {

            function clearFields (){
                document.getElementById('password').value=null;
                document.getElementById('confirm_password').value=null;
            }

            if (confirmPass.length == 0) {
                document.getElementById('confirm_error').innerHTML = "Please confirm password to proceed";
            } else if (confirmPass.length < 6) {
                document.getElementById('confirm_error').innerHTML = "Your password must be at least 6 characters in length";
            } else if (userPass !== confirmPass) {
                document.getElementById('confirm_error').innerHTML = 'Passwords do not match. Please check again.';     
            } else {
                document.getElementById('password_error').innerHTML = "";
                document.getElementById('confirm_error').innerHTML = "";
                alert("Success!");  
                clearFields();
            }              
        }  


        function validateInput() {
            validatePassword();
            validateConfirm();
        }

表格：

   <form>
   <fieldset>
        <legend>CONFIRM PASSWORD</legend>
        <label for="name">Password: </label>
        <input type="text" id="password" size="10" />
        <p id="password_error" class="error"></p>
        <label for="name">Confirm Password: </label>
        <input type="text" id="confirm_password" size="10" />
        <p id="confirm_error" class="error"></p>
        <button id="submit">Submit</button>
    </fieldset>
    </form>

Answer 1

有多个问题

1. 函数clearFields()仅在validateConfirm内部可用
2. 您在页面加载时仅读取一次确认输入的值，您需要在validate方法中读取新值，否则它将始终为空字符串
3. 由于您正在验证密码字段中的策略，因此无需再次检查确认字段，因为您正在检查确认字段和密码字段是否相同

 window.onload = function() { document.getElementById('submit').addEventListener('click', validateInput); } function validatePassword() { var userPass = document.getElementById('password').value; var confirmPass = document.getElementById('confirm_password').value; if (userPass.length == 0) { // Nothing was entered document.getElementById('password_error').innerHTML = 'Please enter a password'; } else if (userPass.length < 6) { // Less than 6 chars document.getElementById('password_error').innerHTML = 'Your password must be at least 6 characters in length'; } else if (userPass.match(/\\s/)) { // contains a space document.getElementById('password_error').innerHTML = 'Your password cannot contain spaces'; } else if (!userPass.match(/\\d/)) { // Does not contain a number document.getElementById('password_error').innerHTML = 'Your password must contain a number'; } else if (userPass !== confirmPass) { document.getElementById('password_error').innerHTML = ""; document.getElementById('confirm_error').innerHTML = 'Passwords do not match. Please check again.'; } else { document.getElementById('password_error').innerHTML = ""; document.getElementById('confirm_error').innerHTML = ""; alert("Success!"); clearFields(); return true; } return false; } function clearFields() { document.getElementById('password').value = ''; document.getElementById('confirm_password').value = ''; } function validateInput() { return validatePassword(); } 

 <fieldset> <legend>CONFIRM PASSWORD</legend> <label for="name">Password:</label> <input type="text" id="password" size="10" /> <p id="password_error" class="error"></p> <label for="name">Confirm Password:</label> <input type="text" id="confirm_password" size="10" /> <p id="confirm_error" class="error"></p> <button id="submit">Submit</button> </fieldset> 

Answer 2

我发现您的代码中有两个错误

1. 在功能validatePassword（）之外设置clearFields（）函数；
2. var ConfirmPass进入内部函数或从调用函数传递

 window.onload = function () { document.getElementById('submit').addEventListener('click', validateInput); } function validatePassword() { var userPass = document.getElementById('password').value; var confirmPass = document.getElementById('confirm_password').value; if (userPass.length == 0) { // Nothing was entered document.getElementById('password_error').innerHTML = 'Please enter a password'; } else if (userPass.length < 6) { // Less than 6 chars document.getElementById('password_error').innerHTML = 'Your password must be at least 6 characters in length'; } else if (userPass.match(/\\s/)) { // contains a space document.getElementById('password_error').innerHTML = 'Your password cannot contain spaces'; } else if (!userPass.match(/\\d/)) { // Does not contain a number document.getElementById('password_error').innerHTML = 'Your password must contain a number'; } else if (userPass !== confirmPass) { document.getElementById('confirm_error').innerHTML = 'Passwords do not match. Please check again.'; } else { document.getElementById('password_error').innerHTML = ""; document.getElementById('confirm_error').innerHTML = ""; alert("Success!"); clearFields(); } } function clearFields() { document.getElementById('password').value = null; document.getElementById('confirm_password').value = null; } function validateConfirm() { var userPass = document.getElementById('password').value; var confirmPass = document.getElementById('confirm_password').value; if (confirmPass.length == 0) { document.getElementById('confirm_error').innerHTML = "Please confirm password to proceed"; } else if (confirmPass.length < 6) { document.getElementById('confirm_error').innerHTML = "Your password must be at least 6 characters in length"; } else if (userPass !== confirmPass) { document.getElementById('confirm_error').innerHTML = 'Passwords do not match. Please check again.'; } else { document.getElementById('password_error').innerHTML = ""; document.getElementById('confirm_error').innerHTML = ""; alert("Success!"); clearFields(); } } function validateInput() { validatePassword(); validateConfirm(); } 

  <form> <fieldset> <legend>CONFIRM PASSWORD</legend> <label for="name">Password: </label> <input type="text" id="password" size="10" /> <p id="password_error" class="error"></p> <label for="name">Confirm Password: </label> <input type="text" id="confirm_password" size="10" /> <p id="confirm_error" class="error"></p> <button id="submit">Submit</button> </fieldset> </form>