使用JavaScript在JSP中进行表单验证
[英]Form validation in JSP using JavaScript
问题描述
<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. 
这是我的JSP，我编写了一个JavaScript函数validate() ，用于对照空格和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. 谢谢。
2 个解决方案
解决方案1
5 已采纳 2013-09-17 12:06:18
In you javascript you are checking via ID but there is no ID for input fields. 在您的JavaScript中，您正在通过ID进行检查，但输入字段没有ID。
<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 检查输入是否为字符串或不使用isNAN() ，如下所示
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>
解决方案2
2 2013-09-17 12:04:42
Correct me if I'm wrong but your javascript function is looking for 'a' and 'b' IDs And you don't have such... your input elements got names. 如果我错了，请指正我，但您的JavaScript函数正在查找“ a”和“ b” ID并且您没有这样的名称...您的输入元素具有名称。 add ids attributes... 添加id属性...
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.