1

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

索引.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 代码是错误的还是我无法正确地将参数传递给它？

4

3 回答 3

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;
    }
}
于 2012-06-20T16:17:40.377 回答
1

这是您的代码的更正版本的小提琴，其中包含以下修复：

  1. 你必须使用 $("#idpassword");
  2. 您应该使用 && 进行“逻辑与”比较 - 而不是 & 用于“按位与”。该代码适用于按位 &，但您并没有尝试进行按位运算。

添加

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

    form.submit(function(event) { ... if (bad) { event.preventDefault(); }

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

于 2012-06-20T16:21:21.353 回答
1 
<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>
于 2012-06-20T16:22:04.213 回答