使用 jquery.validate.js 进行表单验证,没有侵入性,简单方便。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=UTF-8" import="java.util.*" pageEncoding="UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + "" + (request.getServerPort() == 80 ? "" : ":" + request.getServerPort()) + path + "/";
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>手动设置参数页面</title>
<style type="text/css">
label {
width:80px;
display: inline-block;
}
em.error {
width:300px;
color:red;
padding-left:10px;
}
</style>
<script type="text/javascript" src="<%=basePath%>js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/jquery.validate.js"></script>
<script type="text/javascript">
$(function() {
$("#accyRFSalesSetting").validate({
messages: {
weight: {
required:"RF权重值必填",
number:"必须是整数"
},
sales: {
required:"销量必填",
number:"必须是整数"
}
},
rules: {
weight: {
required:true,
number:true
},
sales: {
required:true,
number:true
}
},
errorElement:"em"
});
});
</script>
</head>
<body>
<form id="accyRFSalesSetting" action="/setting" method="post" >
<fieldset>
<legend>手机推荐配件条件设置,顺序RF优先,其次销量</legend>
<div>
<label for="weight">RF >= </label>
<input id="weight" type="text" name="weight" value="${weight}"/>
</div>
<div>
<label for="sales">Sales >= </label>
<input id="sales" type="text" name="sales" value="${sales}"/>
</div>
<div>
<label></label>
<input type="submit" value="提交"><input type="reset" value="重置">
</div>
</fieldset>
</form>
</body>
</html>