使用JavaScript在JSP中进行表单验证 [英] Form validation in JSP using JavaScript
本文介绍了使用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中进行表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
