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

以下是修正后的代码版本的fiddle，其中包含以下修正：

您必须使用$（“＃idpassword”）;
你应该使用＆amp;＆amp;对于“逻辑和”比较 - 不是＆amp;为了“按位和”。该代码与bitwise＆amp;组合使用，但您不是尝试按位操作。

<强> ADDITION

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

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>

使用javascript进行动态表单验证

3 个答案: