Question

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
    <style type="text/css">
      *{
             font-family: cursive;
       }
        </style>
        <script type="text/javascript">
            function validate()
            {
                var a = document.getElementById("a");
                var b = document.getElementById("b");
                var valid = true;
                if(a.value.length<=0 || b.value.length<=0)
                    {
                        alert("Don't leave the field empty!");
                        valid = false;
                    }
                    else{
                        if(!IsNumeric(a.value) || !IsNumeric(b.value))
                            alert("Enter a number");
                    valid = false;
                }
                return valid;
            };

        </script>
</head>
<body bgcolor="#CDCDCC" font-family="cursive" font-size="20px;" font-weight="bold">



    <h2>Welcome <%=request.getParameter("uname")%>! Enter the numbers and the operation that you want to perform: </h2>
    <form font-size="75px;" action ="serv" method="get" onsubmit="return validate();" >
        <hr/>
        Enter the 1st number: <input type="text" name="a" /><br/>

        Enter the 2st number: <input type="text" name="b" /><br/><br/>

       <label>Add</label><input type="radio" name="option" value="Add" /><br/>

       <label>Subtract</label><input type="radio" name="option" value="Subtract"/><br/>

       <label>Multiply</label><input type="radio" name="option" value="Multiply"/><br/>

       <label>Divide</label><input type="radio" name="option" value="Divide" /><br/>

       <input type="submit" value="Submit" />


   </form>


</body>

这是我的JSP，我编写了一个JavaScript函数validate()，用于根据空格和String验证用户输入。我的问题是当我点击提交按钮时，为了正确的整数输入，它正在工作。如果给出了无效的输入，我会得到一个空白页面。有人可以帮助我解决问题是什么以及我应该修改什么？感谢。

Answer 1

在您的javascript中，您正在通过ID进行检查，但输入字段没有ID。

<input type="text" name="a" id ="a"/>
<input type="text" name="b" id="b" />

检查输入是否为字符串是否使用isNAN()，如下所示

if(isNaN(a) || isNaN(b)){
alert("enter a number");}

以下是完整的工作示例

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
    <style type="text/css">
      *{
             font-family: cursive;
       }
        </style>
        <script type="text/javascript">
            function validate()
            {
                var a = document.getElementById("a");
                var b = document.getElementById("b");
                var c = document.getElementById("a").value;
                var d = document.getElementById("b").value;
                var valid = true;
                if(a.value.length<=0 || b.value.length<=0)
                    {
                        alert("Don't leave the field empty!");
                        valid = false;
                    }
                    else{
                        if(isNaN(c) || isNaN(d)){
                            alert("Enter a number");
                    valid = false;}
                }
                return valid;
            };
        </script>
</head>
<body bgcolor="#CDCDCC" font-family="cursive" font-size="20px;" font-weight="bold">

    <h2>Welcome <%=request.getParameter("uname")%>! Enter the numbers and the operation that you want to perform: </h2>
    <form font-size="75px;" action ="serv" method="get" onsubmit="return validate();" >
        <hr/>
        Enter the 1st number: <input type="text" name="a" id="a" /><br/>

        Enter the 2st number: <input type="text" name="b" id="b" /><br/><br/>

       <label>Add</label><input type="radio" name="option" value="Add" /><br/>

       <label>Subtract</label><input type="radio" name="option" value="Subtract"/><br/>

       <label>Multiply</label><input type="radio" name="option" value="Multiply"/><br/>

       <label>Divide</label><input type="radio" name="option" value="Divide" /><br/>

       <input type="submit" value="Submit" />
   </form>
</body>

Answer 2

如果我错了，请纠正我但你的javascript函数正在寻找'a'和'b' ID 你没有这样......你的输入元素有名字。添加ids属性...

使用JavaScript在JSP中进行表单验证

2 个答案: