Html form 表单提交前验证
可以使用form表单的onsubmit方法,在提交表单之前,对表单或者网页中的数据进行检验。
onsubmit指定的方法返回true,则提交数据;返回false不提交数据。
直接看下面的代码:
1
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'login.jsp' starting page</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<form action="addBook.action" οnsubmit="return MyValidata()">
<table align="center" border="1">
<tr>
<td>书名</td>
<td><input id="name" name="book.name"/></td>
</tr>
<tr>
<td>作者</td>
<td><input name="book.author"/></td>
</tr>
<tr>
<td>出版社</td>
<td><input name="book.publish"/></td>
</tr>
<tr>
<td>出版日期</td>
<td><input name="book.publishdate"/></td>
</tr>
<tr>
<td>页数</td>
<td><input name="book.page"/></td>
</tr>
<tr>
<td>价格</td>
<td><input name="book.price"/></td>
</tr>
<tr>
<td>内容</td>
<td><input name="book.content"/></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="提交"/>
<input type="button" οnclick="fanhui()" value="返回"/>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
$("#name").focus(function(){
var name=$('#name').val()
if(name=="账号不能为空"){
$("#name").val("")
}
})
function MyValidata(){
var name=$('#name').val()
name=$.trim(name)
if(1>name.length){
$("#name").val("账号不能为空")
return false;
}else{
return true;
}
}
function fanhui(){
window.location.href="getAllBook.action";
}
</script>
</body>
</html>