1.验证代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit"/>
<title>账号设置</title>
<link href="${base}/resources/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${base}/resources/admin/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="${base}/resources/admin/css/animate.css" rel="stylesheet">
<link href="${base}/resources/admin/css/style.css?v=4.1.0" rel="stylesheet">
<link href="${base}/resources/admin/css/iCheck/custom.css" rel="stylesheet">
<script type="text/javascript" src="${base}/resources/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/jquery.validate.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/common.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/input.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/plugins/layer/layer.min.js"></script>
<script type="text/javascript">
$().ready(function() {
var $inputForm = $("#inputForm");
// 表单验证
$inputForm.validate({
rules:{
name:{
required: true,
remote: {
url: "${base}/admin/book/checkBookName.jhtml",
cache: false
}
},
author: "required",
price: "required",
rent_price: "required"
},
messages: {
name:{remote:"图书名已存在",
required:"用户名不能为空"},
author: "作者不能爲空",
price: "價錢不能为空",
rent_price: "借出价钱不能为空",
}
});
});
</script>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="ibox">
<!--面包屑-->
<div class="ibox-title">
<a href="${base}/admin/list.jhtml">
<small>列表</small>
</a>
»
<small>添加</small>
</div>
<div class="ibox-content">
<form id="inputForm" action="${base}/admin/book/save.jhtml" method="post" class="form-horizontal">
<div class="form-group">
<div class="col-sm-2 text-right"><span style="color: #ff6d6d;">*</span>图书名:</div>
<div class="col-sm-4">
<input type="text" name="name" class="text" maxlength="20" />
</div>
<div class="col-sm-2 text-right"><span style="color: #ff6d6d;">*</span>作者:</div>
<div class="col-sm-4">
<input type="text" name="author" class="text" maxlength="20" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-2 text-right"><span style="color: #ff6d6d;">*</span>定价: </div>
<div class="col-sm-4">
<input type="text" id="password" name="price" class="text" maxlength="20" />
</div>
<div class="col-sm-2 text-right"><span style="color: #ff6d6d;">*</span>当前借出价格: </div>
<div class="col-sm-4">
<input type="text" name="rent_price" class="text" maxlength="20" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-2 text-right">出版社:</div>
<div class="col-sm-4">
<input type="text" name="press" class="text" maxlength="20" />
</div>
<div class="col-sm-2 text-right">简介: </div>
<div class="col-sm-4">
<input type="text" name="intro" class="text" maxlength="100" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-2 text-right">ISBN码:</div>
<div class="col-sm-4">
<input type="text" name="isbn" class="text" maxlength="20" />
</div>
<div class="col-sm-2 text-right">出版时间: </div>
<div class="col-sm-4">
<input type="text" name="publication_time" class="text" maxlength="20" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group actions">
<div class="col-sm-2 text-right"></div>
<div class="col-sm-10">
<input type="submit" class="btn btn-primary" value="确 定" />
<a class="btn btn-white" href="${base}/admin/book/list.jhtml">返 回</a>
</div>
</div>
<div class="hr-line-dashed"></div>
</form>
</div>
<!--ibox content end-->
</div>
<!--ibox end-->
</div>
<script src="${base}/resources/admin/js/iCheck/icheck.min.js"></script>
<script>
$(document).ready(function () {
$('.i-checks').iCheck({
checkboxClass: 'icheckbox_square-green',
radioClass: 'iradio_square-green',
});
});
</script>
</body>
</html>
2.效果
