话不多说，直接看代码：
引入相关文档：
<script th:src="@{/js/jquery-1.9.}"></script>
<script th:src="@{/js/}"></script>
<script src="/layui/"></script>
<link rel="stylesheet" href="/layui/css/">
（这里会使用ajax与进行表单提交）
Form表格部分：
<form id="upload_form" action="/upload" class="layui-form">
<div class="layui-form-item">
<label for="name" class="layui-form-label">姓名：</label>
<input type="text" name="name" id="name" lay-verify="name">
</div>
<div class="layui-form-item">
<label for="sex" class="layui-form-label">性别：</label>
<select id="sex" name="sex" lay-filter="sex" lay-verify="sex">
<option value="0">请选择</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
</div>
<div class="layui-form-item">
<label for="type" class="layui-form-label">类型：</label>
<select id="type" name="type" lay-filter="type" lay-verify="type">
<option value="0">请选择</option>
</select>
</div>
<div class="layui-form-item">
<label for="phone" class="layui-form-label">手机：</label>
<input type="text" name="phone" id="phone" lay-verify="phone">
</div>
<div class="layui-form-item">
<label for="birthday" class="layui-form-label">生日：</label>
<input type="text" name="birthday" id="birthday" lay-verify="birthday">
</div>
<div class="layui-form-item">
<button id="submit" lay-submit="" lay-filter="submit" onclick="initCanSubmit()">保存</button>
</div>
</form>
需要注意的点：
-
form标签需要添加class="layui-form"，否则以下关于form的相关操作无效； -
lay-verify用于表单校验，并且需要在提交按钮中添加lay-submit=""; -
lay-filter相当于一个选择器，比如lay-filter="sex"与lay-filter="type"就将两组<select>区分开来，而中第一个参数的小括号中的值也对应了lay-filter的值； - 提交按钮需要添加
lay-filter="submit"； -
<select>相关的onchange等方法失效；
JavaScript部分：
var can_submit=true;// 通过此值判断是否通过校验
function initCanSubmit() {// 在每次点击保存按钮时首先初始化can_submit值
can_submit=true;
}
$(function(){
<!--引入laydate模块-->
layui.use('laydate', function(){
var laydate=layui.laydate;
laydate.render({
elem: '#birthday'
});
});
<!--引入form模块-->
layui.use(['form'],function(){
var form=layui.form;
<!--id="sex"的select被改变时，对id="type"的select进行刷新-->
form.on('select(sex)', function(data){
$.ajax({
type: 'POST',
data: {
val: data.value
},
url: '/onSelect',
success: function(r){
if(r && r.success){
$('#type').empty();
var opt = document.createElement('option');
opt.value = '0';
opt.innerText = '请选择';
$('#type').append(opt);
$.each(r.data, function(index, item){
opt = document.createElement('option');
opt.value = item.val;
opt.innerText = item.key;
$('#type').append(opt);
});
form.render();// 渲染刷新
}
}
});
})
// 表单校验
var phoneReg = new RegExp("^0?(13|14|15|18)[0-9]{9}");
form.verify({
name: function(value){
if(value==""){
layer.msg("请填写名称");
can_submit=false;
}
},
sex: function(value){
if(can_submit && (value=="" || value==0)) {
layer.msg("请选择性别");
can_submit=false;
}
},
type: function(value){
if(can_submit && (value=="" || value==0)) {
layer.msg("请选择类型");
can_submit=false;
}
},
phone: function(value){
if(can_submit && (value=="" || !phoneReg.test(value))){
layer.msg("请填写手机号");
can_submit=false;
}
},
birthday: function(value){
if(can_submit && value==""){
layer.msg("请填写生日");
can_submit=false;
}
}
})
// 表单提交
form.on('submit(submit)', function(data){
if(can_submit){
$("#upload_form").ajaxForm(function (r) {//??
if (r && r.success) {
window.location.href="/index";
} else {
layer.msg(r.msg);
}
})
} else {
return false;// 表单提交失效
}
})
});
})
需要注意的点：
-
要放在外面，否则不触发； - 若想要表单提交失效，必须在
中return false;
另外，还想向各位大神请教：
在$("#upload_form").ajaxForm(function (r) {这一行代码，起初在公司项目中使用ajaxSubmit可正常提交form，而在自己的练习项目中变为了使用ajaxForm才能正常提交form，请问问题出在哪里？
另外，使用ajax进行表单提交的代码如下：
$.ajax({
url:'/upload',
type:'post',
//dataType:'text',
//contentType: 'application/json',
data:{
name:$('#name').val()
},
success:function(r){
window.location.href='/index';
}
})
附：相关后端代码：
Controller：
@RequestMapping("/upload")
@ResponseBody
public JsonModel upload(String name, Integer sex, Integer type, String phone, String birthday){
System.out.println(name);
System.out.println(sex);
System.out.println(type);
System.out.println(phone);
System.out.println(birthday);
return new JsonModel(true, "提交成功");
}
@RequestMapping("/onSelect")
@ResponseBody
public JsonModel onSelect(Integer val) {
JsonModel js = new JsonModel(true, "");
List<SelectOption> list = new ArrayList<>();
if (val==1) {
SelectOption so1 = new SelectOption("孔明", "1");
SelectOption so2 = new SelectOption("刘备", "2");
list.add(so1);
list.add(so2);
} else if (val==2) {
SelectOption so3 = new SelectOption("嫦娥", "3");
SelectOption so4 = new SelectOption("武瞾", "4");
list.add(so3);
list.add(so4);
}
js.setData(list);
return js;
}
工具类：
public class SelectOption implements Serializable {
private static final long serialVersionUID=1L;
private String key;
private Object val;
......
}