add
程序员文章站
2022-06-04 10:58:11
...
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/bdate/css/bootstrap-datetimepicker.css}" rel="stylesheet">
<title>添加页面</title>
<style>
.form-div {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="form-div">
<form class="form-horizontal" id="addForm" role="form" th:action="@{/house/add}" method="post" enctype="multipart/form-data" >
<!--品牌-->
<div class="form-group">
<label for="pinpai" class="col-sm-2 control-label">品牌</label>
<div class="col-sm-4 input-group">
<input type="text" id="pinpai" name="pinpai" class="form-control">
</div>
</div>
<!--车系-->
<div class="form-group">
<label for="chexi" class="col-sm-2 control-label">车系</label>
<div class="col-sm-4 input-group">
<input type="text" id="chexi" name="chexi" class="form-control">
</div>
</div>
<!--价格-->
<div class="form-group">
<label for="price" class="col-sm-2 control-label">价格</label>
<div class="col-sm-4 input-group">
<input type="number" id="price" name="price" class="form-control">万
</div>
</div>
<!--上牌时间-->
<div class="form-group">
<label for="date" class="col-sm-2 control-label">上牌时间</label>
<div class="input-append date form_datetime">
<input size="16" type="text" value="" readonly id="date">
<span class="add-on"><i class="icon-th"></i></span>
</div>
</div>
<!--级别-->
<div class="form-group">
<label for="jibie" class="col-sm-2 control-label">户型</label>
<div class="col-sm-4 input-group">
<select id="jibie" name="jibie" class="form-control">
<option value="小型车">--小型车--</option>
<option value="中型车">--中型车--</option>
<option value="紧凑型">--紧凑型--</option>
<option value="中大型">--中大型--</option>
<option value="大型车">--大型车--</option>
<option value="mpv">--mpv--</option>
<option value="suv">--suv--</option>
<option value="跑车">--跑车--</option>
</select>
</div>
</div>
<!--变速箱-->
<div class="form-group">
<label for="shoudong1" class="col-sm-2 control-label">变速箱</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="shoudong1" value="手动"> 手动
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="zidong" value="自动"> 自动
</label>
</div>
<!--排量-->
<div class="form-group">
<label for="pailiang" class="col-sm-2 control-label">排量</label>
<div class="col-sm-4 input-group">
<select id="pailiang" name="pailiang" class="form-control">
<option value="1">--1.0L及以下--</option>
<option value="1.1">--1.1L~1.6L--</option>
<option value="1.7">--1.7L~2.0L--</option>
<option value="2.1">--2.1L~2.5L--</option>
<option value="2.6">--2.6L~3.0L--</option>
<option value="3">--3.0L及以上--</option>
</select>
</div>
</div>
<!--历程-->
<div class="form-group">
<label for="licheng" class="col-sm-2 control-label">历程</label>
<div class="col-sm-4 input-group">
<input type="number" id="licheng" name="licheng" class="form-control">万公里
</div>
</div>
<!--归属地-->
<div class="form-group">
<label for="guishudi" class="col-sm-2 control-label">归属地</label>
<div class="col-sm-4 input-group">
<input type="text" id="guishudi" name="guishudi" class="form-control">
</div>
</div>
<!-- 图片 -->
<div class="form-group">
<label for="pic" class="col-sm-2 control-label">图片</label>
<div class="col-sm-4 input-group">
<input type="file" class="form-control"
name="file" id="pic">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-10">
<button type="submit" class="btn btn-info">录入</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-10">
<button type="reset" class="btn btn-info">重置</button>
</div>
</div>
</form>
</div>
<script th:src="@{/js/jquery/jquery.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/js/jquery/jquery.validate.min.js}"></script>
<script th:src="@{/js/jquery/messages_zh.min.js}"></script>
<script th:src="@{/bdate/js/bootstrap-datetimepicker.js}"></script>
<script th:src="@{/bdate/js/bootstrap-datetimepicker.zh-CN.js}"></script>
<script th:inline="javascript">
const path = [[${#request.getContextPath()}]];
$(".form_datetime").datetimepicker({
format: "yyyy-mm",
language: "zh-CN",
autoclose:true,
startView:3,
minView:3,
maxView:3,
initialDate:new Date()
});
$(function(){
Et.loadArea('provinceId',0);
//切换省的时候 加载市
$('#provinceId').change(()=>{
let option = '<option value="">==请选择==</option>';
$('#areaId').html(option);
$('#cityId').html(option);
//得到省的id值作为parentId进行查询
let provinceId = $('#provinceId').val();
if(provinceId){
Et.loadArea('cityId',provinceId);
}
});
$('#cityId').change(()=>{
let option = '<option value="">==请选择==</option>';
$('#areaId').html(option);
//得到省的id值作为parentId进行查询
let cityId = $('#cityId').val();
if(cityId){
Et.loadArea('areaId',cityId);
}
});
Et.loadDict('rent_mode');
Et.loadDict('house_type');
Et.loadDict('orientation');
Et.checkForm();
});
let Et={
//加载省市区
//
loadArea: function(domId,parentId){
$.ajax({
url:path + '/area/' + parentId,
type:'GET',
data:'',
dataType: 'JSON',
success:function(data){
let options = '<option value="">==请选择==</option>';
for(let area of data){
options += "<option value='"+area.id+"'>"+area.areaName+"</option>"
}
$('#' + domId).html(options);
}
});
},
//加载方式/户型和朝向
loadDict:function(groupId){
$.ajax({
url:path+'/dict/'+groupId,
type:'get',
data:'',
dataType:'JSON',
success:function(data){
let options = '';
for(let i in data){
let name = data[i].name;
let value = data[i].value;
options += "<option value='"+value+"'>"+name+"</option>"
}
$('#' + groupId).append(options);
}
});
},
checkForm:function(){
$('#addForm').validate({
//验证信息的标签label标签改为div标签
//layui哪里改这里
errorElement: 'div',
//function('验证标签','表单项')
//这里是为了一点添加立马跟DIV同级 不在框下方显示提示
errorPlacement:function(error,element){
error.addClass('input-group-addon');
error.appendTo(element.parent());
},
success:function(label) {
label.addClass('success input-group-addon').text('校验成功');
},
rules:{
provinceId: 'required',
cityId: 'required',
areaId:'required',
rental:{
required: true,
max:100000,
positiveInt: true
},
},
messages:{
provinceId: '省为必填字段',
cityId: '市为必填字段',
areaId: '区为必填字段',
rental:{
required: '租金为必填字段',
max: '租金不能大于10w',
positiveInt: '租金必须是正整数'
},
}
});
//$.validator(校验名称,方法,显示信息)
$.validator.addMethod('positiveInt',function(value,element){
let expression = /^\+?[1-9]\d*$/;
return this.optional(element) || (expression.test(value));
},'必须是正整数')
}
}
</script>
</body>
</html>
推荐阅读
-
dotnetcore-officeaddin-toolbox : Office 365 Add-in开发人员的工具箱
-
Dockerfile 指令 ADD 和 COPY介绍
-
【转载】C#中ArrayList集合类使用Add方法添加元素
-
详解Dockerfile 中的 COPY 与 ADD 命令
-
服务器 vim模式下报错E37: No write since last change (add ! to override)
-
ERROR StatusLogger Log4j2 could not find a logging implementation. Please add log4j-core to the classpath. Using SimpleLogger to log to the console...
-
【转载】C#中Add方法将往List集合末尾添加相应元素对象
-
Add Two Numbers
-
Android studio初次安装启动时弹出unable to access android sdk add-on list提示的解决方法
-
java.lang.IllegalStateException: No such application config! Please add dubbo:application name