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

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

本文介绍了使用JavaScript在JSP中进行表单验证的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

 < HTML> 
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8>
< title> JSP Page< / title>
< style type =text / css>
* {
font-family:cursive;
}
< / style>
< script type =text / javascript>
函数validate()
{
var a = document.getElementById(a);
var b = document.getElementById(b);
var valid = true;
if(a.value.length< = 0 || b.value.length< = 0)
{
alert(Do not leave the field empty!);
valid = false;
}
else {
if(!IsNumeric(a.value)||!IsNumeric(b.value))
alert(Enter a number);
valid = false;
}
返回有效;
};

< / script>
< / head>
< body bgcolor =#CDCDCCfont-family =cursivefont-size =20px;字体重量=黑体>



< h2>欢迎<%= request.getParameter(uname)%>!输入您想要执行的数字和操作:< / h2>
< form font-size =75px; action =servmethod =getonsubmit =return validate(); >
< hr />
输入第一个数字:< input type =textname =a/>< br />

输入第二个数字:< input type =textname =b/>< br />< br />

< label>添加< / label>< input type =radioname =optionvalue =Add/>< br />

< label>减去< / label>< input type =radioname =optionvalue =Subtract/>< br />

< label>乘以< / label>< input type =radioname =optionvalue =Multiply/>< br />

< label>分割< / label>< input type =radioname =optionvalue =Divide/>< br />

< input type =submitvalue =Submit/>


< / form>


< / body>


这是我的JSP和I已经写了一个JavaScript函数 validate()来验证用户输入是否符合空格和字符串。
我的问题是,当我点击提交按钮,正确的整数输入,它正在工作。如果输入无效,我会得到一个空白页面。有人可以帮我解决问题是什么,我应该修改什么?感谢。

解决方案

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

 < input type =textname =aid =a/> 
< input type =textname =bid =b/>

检查输入是字符串还是不使用 isNAN() code>如下所示:

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ b提醒(输入数字);}

以下是完整的工作示例

 < html> 
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8>
< title> JSP Page< / title>
< style type =text / css>
* {
font-family:cursive;
}
< / style>
< script type =text / javascript>
函数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(Do not leave the field empty!);
valid = false;
}
else {
if(isNaN(c)|| isNaN(d)){
alert(Enter a number);
valid = false;}
}
return valid;
};
< / script>
< / head>
< body bgcolor =#CDCDCCfont-family =cursivefont-size =20px;字体重量=黑体>

< h2>欢迎<%= request.getParameter(uname)%>!输入您想要执行的数字和操作:< / h2>
< form font-size =75px; action =servmethod =getonsubmit =return validate(); >
< hr />
输入第一个数字:< input type =textname =aid =a/>< br />

输入第二个数字:< input type =textname =bid =b/>< br />< br />

< label>添加< / label>< input type =radioname =optionvalue =Add/>< br />

< label>减去< / label>< input type =radioname =optionvalue =Subtract/>< br />

< label>乘以< / label>< input type =radioname =optionvalue =Multiply/>< br />

< label>分割< / label>< input type =radioname =optionvalue =Divide/>< br />

< input type =submitvalue =Submit/>
< / form>
< / body>

<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>

This is my JSP and I've written a JavaScript function validate() that validates the user input against blank space and String.My problem is that when i click on the submit button, for correct integer input, it is working. If an invalid input is given, i get a blank page. Can someone help me out with what the problem is and what is that i should modify? Thanks.

解决方案

In you javascript you are checking via ID but there is no ID for input fields.

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

to check if a input is string or not use isNAN() like the following way

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

Following is the complete working example

<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>

这篇关于使用JavaScript在JSP中进行表单验证的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-21 00:07