Question

我想验证我的jsp表单。

我的test.jsp页面如下所示

<%@ page import="java.util.Date" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test</title>
<script>
    function validateForm() {
        var address = document.getElementById("txtAddress");
        alert("Address : " + address);
        if (address == null || address == "") {
            alert("Enter Address");
            return false;
        }

        var city = document.getElementById("txtCity");
        if (city == null || city == "") {
            alert("Enter City");
            return false;
        }
    }
</script>
</head>
<body>
    <form name="TestForm1" action="loginServlet" method="post" onsubmit="return validateForm();">
        <table>
            <tr>
                <td>Address :</td>
                <td><input type="text" name="txtAddress" value="${reqObj.address}" /></td>
                <td>City :</td>
                <td><input type="text" name="txtCity" value="${reqObj.city}" /></td>
            </tr>
            <tr align="left">
                <td colspan="4"><input type="submit" value="Submit" /></td>
            </tr>
        </table>
        <%
            String createdDate = "";
            Date dt = new Date();
            createdDate = dt.toString();
            System.out.println("currentTime>>>>" + createdDate);
        %>
    </form>
</body>
</html>

问题是，运行此项目时，我的test.jsp表单显示为空的地址字段，当我点击提交按钮时，警告显示＆＃34;地址：null＆＃34;

但是当我在地址文本框字段上写一些值时，我再次点击提交按钮，它显示我＆＃34;地址：null＆＃34;

我在Eclipse Mars 1中使用JAVA。

Answer 1

定义输入标记的id，因为您使用document.getElementById()并且找不到id，因此每次都返回null。

Answer 2

您没有地址输入的ID，您可以使用document.getElementsByName(name)代替。

var address = document.getElementsByName("txtAddress")[0];

或将ID添加到地址元素

<input type="text" id="txtAddress" value="${reqObj.address}" />

Answer 3

jsp中没有id属性。

<input type="text" name="txtAddress" value="${reqObj.address}" />

添加id（id="txtAddress"）attr，然后使用document.getElementById("txtAddress");

<input type="text" id="txtAddress" name="txtAddress" value="${reqObj.address}" />

您可以检查length而不是null和""

if(address.value.trim().length == 0)

不仅可以使用id，还可以使用class,name,tag

document.getElementById("xyz");
document.getElementsByTagName("p");
document.getElementsByClassName("abc");
document.getElementsByName("xyz");

更新：主要是您错过了该元素的 value 。取值，然后检查

<强> address.value.trim().length

Answer 4

您可以使用html5验证。这是同样的jfiddle https://jsfiddle.net/ianoxley/VY8KU/

<input type="text" name="txtAddress" required>

Answer 5

您指定“txtAddress”作为名称而不是id。尝试通过创建id来访问元素，如下所示

<input type="text" id="txtAddress" name="txtAddress" value="${reqObj.address}" />

如果您对添加ID不感兴趣并且想要按名称访问txtAddress值，请将javascript函数中的行更改为如下

var address = document.TestForm1.txtAddress;

这里的地址仍然是一个对象。检查任何输入类型的验证时，请指定object.value而不是直接检查对象。例如：

var address = document.TestForm1.txtAddress.value;

JavaScript验证不适用于HTML表单

5 个答案: