需求文档：
字典类型表单验证。（以下描述你们将在“详细设计文档”中看到。）
1.编码不能为空（前端验证）
2.编码只能由数字和字母组成（前端验证）
3.编码在数据库表当中是主键，要求具有唯一性（后台验证：ajax）
4.失去焦点则验证
5.验证消息显示在控件的下方
6.消息要求红色字体，12号。
7.获得焦点之后，自动清除错误信息，并且文本框中的内容不合法的时候，文本框的内容自动清空。
8.用户最终保存按钮点击之后，必须保证所有的表单项都是合法的方可提交。
前端代码：
<%@page contentType="text/html;charset=UTF-8"%>
<!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">
// alert(new Date().getTime());
$(function(){
// 页面加载完毕之后，给id="code"的文本框绑定blur事件
// $("#code").blur(); // 这行代码是“触发”blur事件。
$("#code").blur(function(){
// 绑定blur事件，blur事件发生之后执行这个回调函数。
// this // this是dom对象，不是jquery对象，注意：dom和jquery对象的方法不能交叉使用，各自使用各自的。
// jquery对象转换成dom对象：jquery对象.get(0) 或者 jquery对象[0]
// dom对象转换成jquery对象：$(dom对象)
var code = $.trim(this.value); // $.trim() 这是jquery中的工具方法，可以去除字符串的前后空白。
// 没必要这么写
// if(code.length == 0){}
// 这样写。
if(code == ""){
//注意：jQuery中的html(),text()和val()
//相关链接 https://www.cnblogs.com/WhiteM/p/7470105.html
$("#codeErrorMsg").text("编码不能为空！");
} else {
// 不为空，继续判断该编码是否含有特殊符号。
// 正则表达式：只能由数字和字母组成
/*
常见正则表达式：
[0-9] 0到9任意1个数字
[a-z] a到z任意一个字母
[A-Z] A到Z任意一个字母
[0-9]{1} 0到9任意1个数字
[0-9]{2} 0到9任意2个数字
[0-9]{2,} 0到92+个数字(次数 >= 2)
[0-9]{2,3} 0到9数字出现个数为2到3次。
[0-9]+ 出现1到N次
[0-9]* 出现0到N次
[0-9]? 出现1或0次
^ 字符串开始
$ 字符串结尾
javascript当中怎么创建正则表达式对象？两种方式：
第一种方式：使用js内置的对象
var regExp = new RegExp("正则表达式");
第二种方式：使用//
var regExp = /正则表达式/;
建议使用第二种方式，代码写的少。
正则表达式对象的test方法很重要，该方法的返回值为true或者false，true表示字符串和正则表达式能够匹配成功。
*/
var regExp = /^[0-9a-zA-Z]+$/;
var ok = regExp.test(code);
if(ok){
// 不为空，并且没有特殊符号，应该继续判断唯一性（需要发送ajax验证）
// 验证唯一性（根据code取数据）
$.ajax({
type : "get",
url : "settings/dictionary/type/checkCodeUnique.do",
async : false, // 同步ajax.
cache : false,
data : {
"code" : code
},
success : function(json){
// {"success" : true} 表示可以使用
// {"success" : false} 表示不能使用
if(json.success){
$("#codeErrorMsg").text("");
}else{
$("#codeErrorMsg").text("编码已存在！");
}
}
});
}else{
$("#codeErrorMsg").text("编码只能由数字和字母组成！");
}
}
});
$("#code").focus(function(){
if($("#codeErrorMsg").text() != ""){
// 清空内容
$(this).val("");
}
// 清空错误信息
$("#codeErrorMsg").text("");
});
$("#saveBtn").click(function(){
// 触发blur事件
$("#code").blur(); // blur()事件发生之后，这行代码就执行结束了。
// 这行代码执行结束了，但是异步的ajax还在后台执行。
// 也就是说ajax验证还没有结束。
// 非常重要：ajax什么情况下必须使用同步方式。
// 查看错误信息有没有
if($("#codeErrorMsg").text() == ""){
$("#dicTypeForm").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="dicTypeForm" action="settings/dictionary/type/save.do" method="post" class="form-horizontal" role="form">
<div class="form-group">
<label for="create-code" 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="code" name="code" style="width: 200%;" placeholder="编码作为主键，不能是中文">
<span id="codeErrorMsg" style="color: red;font-size: 12px;"></span>
</div>
</div>
<div class="form-group">
<label for="create-name" class="col-sm-2 control-label">名称</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="name" name="name" style="width: 200%;">
</div>
</div>
<div class="form-group">
<label for="create-describe" class="col-sm-2 control-label">描述</label>
<div class="col-sm-10" style="width: 300px;">
<textarea class="form-control" rows="3" id="description" name="description" style="width: 200%;"></textarea>
</div>
</div>
</form>
<div style="height: 200px;"></div>
</body>
</html>
表单验证补充详细讲解：
需求：
1、表单验证：保存字典值的表单验证。
字典类型编码不能为空
字典值不能为空
在同一个字典类型编码下，字典值具有唯一性。
排序号可以为空，但是排序号不为空的时候，必须是正整数。
注意：
最终用户点击保存的时候，必须保证每一个表单项是合法的方可提交。
还要注意：ajax同步
2、保存字典值。
```cpp
<%@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>
![图形处理单元(GPU)的演进[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)