1.使用layui的form模块来实现表单提交。 2.在表单中设置提交事件,调用form.on方法,监听submit事件。在函数中获取到表单数据,然后将表单数据提交到后台。 3.在后台进行校验,校验成功后返回success,否则返回failed。 以下是一个示例:HTML代码:
1.使用layui的form模块来实现表单提交。
2.在表单中设置提交事件,调用form.on方法,监听submit事件。在函数中获取到表单数据,然后将表单数据提交到后台。
3.在后台进行校验,校验成功后返回success,否则返回failed。
以下是一个示例:HTML代码:
<form class="layui-form" action="" lay-filter="formDemo">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="submitDemo">提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
JavaScript代码:
layui.use(['form', 'layer'], function(){
var form = layui.form;
var layer = layui.layer;
//监听提交
form.on('submit(submitDemo)', function(data){
//获取表单数据
var username = data.field.username;
var password = data.field.password;
//将表单数据提交到后台
$.post("url/to/backend", {username:username, password:password}, function(resp){
if(resp == "success"){
layer.msg("提交成功!");
}else{
layer.msg("提交失败!");
}
});
return false; //阻止表单提交
});
});
后台接收请求,进行校验:
@RequestMapping(value = "url/to/backend", method = RequestMethod.POST)
@ResponseBody
public String submit(@RequestParam String username, @RequestParam String password){
if(username.equals("admin") && password.equals("123456")){
return "success";
}else{
return "failed";
}
}
注意事项:
1.为了实现表单提交,需要在lay-filter属性中设置一个名称,用来绑定表单提交的事件。
2.在表单中设置提交事件,调用form.on方法,监听submit事件,注意返回值一定要为false。
3.后台接收请求,进行校验,返回给前端“success”或“failed”字符串。
沃梦达教程
本文标题为:layui如何将表单数据提交到后台并进行校验?
猜你喜欢
- Bootstrap .sr-only类 1970-01-01
- Bootstrap Split按钮下拉列表 1970-01-01
- Bootstrap网格列 1970-01-01
- Bootstrap下拉导航栏 1970-01-01
- Bootstrap分页状态 1970-01-01
- Bootstrap可折叠 1970-01-01
- D3.js附加 1970-01-01
- Bootstrap内联元素 1970-01-01
- Bootstrap创建大按钮 1970-01-01
- Bootstrap折叠插件事件 1970-01-01