首先引入核心jar
<%@taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core” %>
<%@page contentType="text/html;charset=UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
<meta charset="UTF-8">
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
$("#value").blur(function(){
// 判断“字典类型编码”是否为空
var typeCode = $("#typeCode").val();
if(typeCode == ""){
$("#typeCodeErrorMsg").text("字典类型编码不能为空!");
} else {
// 字典类型编码不为空,判断字典值是否为空。
var value = $.trim(this.value);
if(value == ""){
$("#valueErrorMsg").text("字典值不能为空!");
}else{
// 字典类型编码不为空,并且字典值也不为空,继续判断唯一性。
$.ajax({
type : "get",
cache : false,
async : false,
url : "settings/dictionary/value/checkValueUniqueByTypeCode.do",
data : {
"typeCode" : typeCode,
"value" : value
},
success : function(json){
if(json.success){
$("#valueErrorMsg").text("");
}else{
$("#valueErrorMsg").text("字典值在该字典类型编码下已存在!");
}
}
});
}
}
});
$("#typeCode").change(function(){
var typeCode = this.value;
if(typeCode == ""){
$("#typeCodeErrorMsg").text("字典类型编码不能为空!");
} else {
$("#typeCodeErrorMsg").text("");
}
});
$("#value").focus(function(){
if($("#valueErrorMsg").text() != ""){
$(this).val("");
}
$("#valueErrorMsg").text("");
});
$("#orderNo").blur(function(){
var orderNo = $.trim(this.value);
if(orderNo != ""){
// 排序号可以为空,但是不为空的时候必须是正整数
var regExp = /^[1-9][0-9]*$/;
var ok = regExp.test(orderNo);
if(ok){
$("#orderNoErrorMsg").text("");
}else{
$("#orderNoErrorMsg").text("排序号必须为正整数!");
}
}
});
$("#orderNo").focus(function(){
if($("#orderNoErrorMsg").text() != ""){
$(this).val("");
}
$("#orderNoErrorMsg").text("");
});
$("#saveBtn").click(function(){
// 触发blur
$("#value").blur();
$("#orderNo").blur();
if($("#typeCodeErrorMsg").text() == "" && $("#valueErrorMsg").text() == "" && $("#orderNoErrorMsg").text() == ""){
$("#dicValueForm").submit();
}
});
});
</script>
</head>
<body>
<div style="position: relative; left: 30px;">
<h3>新增字典值</h3>
<div style="position: relative; top: -40px; left: 70%;">
<button type="button" class="btn btn-primary" id="saveBtn">保存</button>
<button type="button" class="btn btn-default" onclick="window.history.back();">取消</button>
</div>
<hr style="position: relative; top: -40px;">
</div>
<form id="dicValueForm" action="settings/dictionary/value/save.do" method="post" class="form-horizontal" role="form">
<div class="form-group">
<label for="create-dicTypeCode" class="col-sm-2 control-label">字典类型编码<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<select class="form-control" id="typeCode" name="typeCode" style="width: 200%;">
<option value=""></option>
<c:forEach items="${dtList }" var="dt">
<option value="${dt.code }">${dt.name }</option>
</c:forEach>
</select>
<span id="typeCodeErrorMsg" style="color: red;font-size: 12px;"></span>
</div>
</div>
<div class="form-group">
<label for="create-dicValue" class="col-sm-2 control-label">字典值<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="value" name="value" style="width: 200%;">
<span id="valueErrorMsg" style="color: red;font-size: 12px;"></span>
</div>
</div>
<div class="form-group">
<label for="create-text" class="col-sm-2 control-label">文本</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="text" name="text" style="width: 200%;">
</div>
</div>
<div class="form-group">
<label for="create-orderNo" class="col-sm-2 control-label">排序号</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="orderNo" name="orderNo" style="width: 200%;">
<span id="orderNoErrorMsg" style="color: red;font-size: 12px;"></span>
</div>
</div>
</form>
<div style="height: 200px;"></div>
</body>
</html>
核心代码:
后台代码要写一个转发操作。