Question

我正在尝试验证登录Xhtml中的文本框，一旦我弄清楚代码，代码中的section class'container'就不起作用了。

如何正确编写代码并验证文本框？

<head>
    <script type = 'text/javascript'>
        function validate() {
            if (document.getElementById("login").value == "") {
                alert("User name may not be blank");
            } else if (document.getElementById("password").value == "") {
                alert("Password may not be blank.");
            }
        }
    </script> 
    <title>Login Form</title>
    <link rel="stylesheet" href="css/style.css"/> 
</head>    
<body>
    <h1> Login</h1>
    <section class="container">
        <div>         
            <form method="post" action="index.xhtml" onsubmit="return validate();">
                <p>
                    <input type="text" name="login" value="" id="login" placeholder="Username or Email" />
                    <input type="password" name="password" value="" id="password" placeholder="Password" />
                </p>
                <p>
                    <label>
                        <input type="checkbox" name="remember_me" id="remember_me" />Remember me on this computer
                    </label>
                </p>
                <p class="submit">
                    <input type="submit" name="commit" value="Login" onclick="validate();" />
                    <button type="reset" value="Clear">Clear</button>
                </p>
            </form>
            <form action= "http://localhost:8080/ChattBank/LoginServlet" method="post"/>
        </div>
    </section>
</body>

Answer 1

您可以使用jquery validation。这很简单。

<form method="post" action="index.xhtml" id="loginForm">
...
</form>
$("#loginForm").validate({
    rules: {
        "login": {
            required: true
        },
        "password": {
            required: true
        },
   messages: {
        "login": "This field is required",
        "password": "This field is required",
    },
});

Answer 2

修改

试试这个:(用这个替换你的表格）

<input type="text" name="login" value="" id="login" placeholder="Username or Email" /> <input type="password" name="password" value="" id="password" placeholder="Password" /> </p> <p> <label> <input type="checkbox" name="remember_me" id="remember_me" />Remember me on this computer</label> </p> <p class="submit"> <input type="submit" name="commit" value="Login" onclick="validate();" /> <button type="reset" value="Clear">Clear</button> </p> <script> function validate() { if (document.getElementById("login").value == "") { alert("User name may not be blank"); } else if (document.getElementById("password").value == "") { alert("Password may not be blank."); } } </script>

这是一个有效的fiddle

Answer 3

我们正在尝试使用document.getElementById("login")和document.getElementById("password")，它们都是null。因为您的两个输入字段没有id作为属性。您需要添加：

<input type="text" ... id="login"  />
...
<input type="password" ... id="password"  />

同样validate()没有属性，因此请勿在{{1}}输入上传递this。

验证文本框Javascript

3 个答案: