使用javascript进行动态表单验证

Question

它又是新手..我正在尝试设计一个带有用户名和密码并验证它们的表单。 但是，首先我要确保用户在将其传递给servlet或任何其他服务器相关组件之前填写这两个字段。 我希望使用javascript生成一个警告按钮，更像是一个或两个字段为空时的JOptionPane。 我的代码是

---

的index.jsp

---

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
    <script src="newjavascript.js"></script>
</head>
<body>
    <h1>Hello World!</h1>
    <form id="form" method="post" action="final.jsp">
    Student name :<br><input type="text" value="" name="username"   id="idusername"><br><br>
    Password :<br><input type="text" value="" name="password" id="idpassword"><br><br>
    <input type="submit" value="Register" />
</form>
</body>
</html>

---

我将上面的内容传递给javascript文件newjavascript.js

---

$(document).ready(function(){
var form = $("#form");
var username = $("#idusername");
    var password = $("idpassword");
//On Submitting
form.submit(function(){
    if(validateName() & validatePassword())
        return true;
    else
    {
        alert('Some fields are not filled correctly. Please fill them correctly.');
        return false;
    }
});

function validateName(){

    if(username.val().length < 1){
        return false;
    }

    else{
        return true;
    }
}

    function validatePassword(){


    if(password.val().length <5){
        return false;
    }

    else{           
        return true;
    }
}
});

---

我的javascript代码是错误的还是我没能正确地将参数传递给它？

Answer 1

这样做

$(document).ready(function(){
var form = $("#form");
form.submit(function(){
    if(validateName() && validatePassword())
        return true;
    else
    {
        alert('Some fields are not filled correctly. Please fill them correctly.');
        return false;
    }
});

});
function validateName(){
var username = $("#idusername");

    if(username.val().length < 1){
        return false;
    }

    else{
        return true;
    }
}

    function validatePassword(){
    var password = $("#idpassword");//previously it was wrong


    if(password.val().length <5){
        return false;
    }

    else{           
        return true;
    }
}

Answer 2

以下是修改后的代码版本的小提琴 ，其中包含以下修复：

1. 你必须使用$（“＃idpassword”）;
2. 您应该使用&&进行“逻辑和”比较 - 而不是“按位和”。 代码使用按位＆，但您不是尝试按位操作。

加成

1. 您必须阻止默认表单提交。

   form.submit（function（event）{... if（bad）{event.preventDefault（）;}

（我在小提琴中有这个，但忘了提它）

Answer 3

<script>
        $(document).ready(function () {
            var form = $("#form");
            alert(form);
            var username = $("#idusername");
            var password = $("#idpassword");
            //On Submitting
            form.on("submit",function () {
                if (validateName() & validatePassword())
                    return true;
                else {
                    alert('Some fields are not filled correctly. Please fill them correctly.');
                    return false;
                }
            });

            function validateName() {

                if (username.val().length < 1) {
                    return false;
                }

                else {
                    return true;
                }
            }

            function validatePassword() {
                alert(password);

                if (password.val().length < 5) {
                    return false;
                }

                else {
                    return true;
                }
            }
        });


    </script>