Question

我现在还没有使用过JS或HTML，需要创建一个用于向数据库提交数据的单一页面。此代码仅用于验证表单（客户端）。似乎JS功能没有被执行，我知道我忘记了某些地方，但我无法解决问题，有没有人有任何想法？

<html>
<head>
    <script type="text/javascript">
        function validateSignup() {
            var redFeild = "";
            var greenField = "";

            function colourRed(redFeild) {
                document.getElementById(redFeild).style.color="ff0000";
            }

            function colourGreen(greenField) {
                document.getElementById(greenField).style.color="08BB3E";
            }

            var firstV = false;
            var userfirst = document.getElementById("userFirst").value;

            switch (userfirst, firstV) {
                case (userfirst == ""):
                    redFeild = document.getElementById("first");
                    colourRed(redFeild);
                    redFeild = document.getElementById("nameError");
                    colourRed(redFeild);
                    break;
                case (userfirst.match(/^[a-zA-Z]+$/) == false):
                    redFeild = document.getElementById("first");
                    colourRed(redFeild);
                    redFeild = document.getElementById("nameError");
                    colourRed(redFeild);
                    break;
                default:
                    firstV = true;
                    greenField = document.getElementById("first");
                    colourGreen(greenField);
                    greenField = document.getElementById("nameError");
                    colourGreen(greenField);
                    break;
            }

            var lastV = false;
            var userlast = document.getElementById("userLast").value;

            switch (userlast, lastV) {
                case (userlast == ""):
                    redFeild = document.getElementById("last");
                    colourRed(redFeild);
                    redFeild = document.getElementById("nameError");
                    colourRed(redFeild);
                    break;
                case (userlast.match(/^[a-zA-Z]+$/) == false):
                    redFeild = document.getElementById("last");
                    colourRed(redFeild);
                    redFeild = document.getElementById("nameError");
                    colourRed(redFeild);
                    break;
                default:
                    lastV = true;
                    greenField = document.getElementById("last");
                    colourGreen(greenField);
                    greenField = document.getElementById("nameError");
                    colourGreen(greenField);
                    break;
            }

            var emailV = false;
            var useremail = document.getElementById("userEmail").value;

            switch (useremail, emailV) {
                case (useremail == ""):
                    redFeild = document.getElementById("email");
                    colourRed(redFeild);
                    redFeild = document.getElementById("emailError");
                    colourRed(redFeild);
                    break;
                case (useremail.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/) == false):
                    redFeild = document.getElementById("email");
                    colourRed(redFeild);
                    redFeild = document.getElementById("emailError");
                    colourRed(redFeild);
                    break;
                default:
                    emailV = true;
                    greenField = document.getElementById("email");
                    colourGreen(greenField);
                    greenField = document.getElementById("emailError");
                    colourGreen(greenField);
                    break;
            }

            var usernameV = false;
            var username = document.getElementById("usrname").value;

            switch (username, usernameV) {
                case (username == ""):
                    redFeild = document.getElementById("user");
                    colourRed(redFeild);
                    redFeild = document.getElementById("usernameError");
                    colourRed(redFeild);
                    break;
                case (username.match(/^[a-zA-Z0-9]+$/) == false):
                    redFeild = document.getElementById("user");
                    colourRed(redFeild);
                    redFeild = document.getElementById("usernameError");
                    colourRed(redFeild);
                    break;
                default:
                    usernameV = true;
                    greenField = document.getElementById("user");
                    colourGreen(greenField);
                    greenField = document.getElementById("usernameError");
                    colourGreen(greenField);
                    break;
            }

            var passwordV = false;
            var userpsswd = document.getElementById("userPassword").value;
            var userpsswdC = document.getElementById("userPasswordConfirm").value;

            switch (userpsswd, userpsswdC, passwordV) {
                case (userpsswd || userpsswdC == ""):
                    redFeild = document.getElementById("pass");
                    colourRed(redFeild);
                    redFeild = document.getElementById("passC");
                    colourRed(redFeild);
                    redFeild = document.getElementById("passwordCError");
                    colourRed(redFeild);
                    break;
                case (userpsswd.match(/^.*(?=.{8,})(?=.*[a-z])(?=.*[A-Z])(?=.*\d).*$/) == false):
                    redFeild = document.getElementById("pass");
                    colourRed(redFeild);
                    redFeild = document.getElementById("passC");
                    colourRed(redFeild);
                    redFeild = document.getElementById("passwordError");
                    colourRed(redFeild);
                    break;
                case (userpsswd != userpsswdC):
                    redFeild = document.getElementById("pass");
                    colourRed(redFeild);
                    redFeild = document.getElementById("passC");
                    colourRed(redFeild);
                    redFeild = document.getElementById("passwordError");
                    colourRed(redFeild);
                    break;
                default:
                    passwordV = true;
                    greenField = document.getElementById("pass");
                    colourGreen(greenField);
                    greenField = document.getElementById("passC");
                    colourGreen(greenField);
                    greenField = document.getElementById("passwordError");
                    colourGreen(greenField);
                    break;
            }

            if (firstV && lastV && emailV && usernameV && passwordV == true) {
                return true;
            } else {
                return false;
            }
        }

        var signup = document.getElementById("signup");

        return validateSignup(signup);
    </script>
</head>
<body>
    <div align="center">    
        <form id="signup" name="signup" onsubmit="return validateSignup(this.form)" method="get" action="users.php">
            <h1>Sign Up</h1>
            <label id="first">First Name</label>
            <input type="text" id="userFirst">
            <br>    
            <br>    <label id="last">Last Name</label>
            <input type="text" id="userLast">
            <br> <label id="nameError">First name and last name are required and must contain only upper and lower case letters</label>
            <br>    
            <br>    <label id="email">Email</label>
            <input type="email" id="userEmail">
            <br> <label id="emailError">Email is required and must be valid</label>
            <br>    
            <br>    <label id="user">Username</label>
            <input type="text" id="usrname">
            <br> <label id="usernameError">Username is required and must only contain alphanumeric values</label>
            <br>    
            <br>    <label id="pass">Password</label>
            <input type="password" id="userPassword">
            <br> <label id="passwordError">Password is required and must contain at least one uppercase letter, one lowercase letter, and one number</label>
            <br>    
            <br>    <label id="passC">Confirm Password</label>
            <input type="password" id="userPasswordConfirm">
            <br> <label id="passwordCError">Password and confirmed password must be the same</label>
            <br>    
            <br>    <input type="submit" text="Sign Up">
        </form>
    </div>
</body>

Answer 1

 onsubmit="return validateSignup(this.form)"

应该是¹

 onsubmit="return validateSignup(this)"

this - onxyz元素中的form元素样式事件处理程序中的

form是表单;它没有onxyz属性。（通常情况确实如此：在this - 属性代码中，addEventListener是附加属性的元素。）

¹考虑使用现代事件处理，例如<html> <head> <script src=dateLibrary.js></script> <script src=drawingLibrary.js></script> <script language=javascript> </head> <body> <script> function drawLine(14, 'blue' , 0); var dateOfBirth = new Date(1989,2,18); var dateInShort = dateStringShort(dateOfBirth); document.write("birthday in short form is:" + dateInLong); </script> </body> </html>。

JS函数似乎不是由HTML表单执行，不确定原因

1 个答案: