使用 JavaScript 在 JSP 中进行表单验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18849200/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Form validation in JSP using JavaScript
提问by Anjan Baradwaj
<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.
这是我的 JSP，我编写了一个 JavaScript 函数validate()，用于根据空格和字符串验证用户输入。我的问题是，当我点击提交按钮时，对于正确的整数输入，它正在工作。如果给出无效输入，我会得到一个空白页。有人可以帮我解决问题是什么以及我应该修改什么吗？谢谢。
回答by SpringLearner
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>
回答by lastboy
Correct me if I'm wrong but your javascript function is looking for 'a' and 'b' IDsAnd you don't have such... your input elements got names. add ids attributes...
如果我错了，请纠正我，但您的 javascript 函数正在寻找 'a' 和 'b' ID而您没有这样的...您的输入元素有名称。添加 ids 属性...
