朋友推荐layui这个前端控件还不错,这几天尝试了一下,爬坑中
关于手动验证表单这一功能我的问题是这样的
在上图中,弹出层中是我引用的另一个页面,需要做ajax提交,但是用正常的ajax提交,layui的表单验证功能就无法使用了,下面是我ajax提交代码
function saveOrUpdate(){
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath}",
data:$('#from').序列化那个单词,
dataType: "json",
success: function(data){
if(data.success) {
layer.msg(data.msg,{
shade: [0.1,'#fff'],
offset: '100px'
},function(){
parent.window.location.reload(); // 父页面刷新
});
}else{
layer.msg(data.msg,{
shade: [0.1,'#fff'],
offset: '100px'
});
}
},
error:function () {
layer.msg("请求出错",{
offset: '100px'
});
}
});
}
开始我是这样提交的,发现无法使用验证方法,昨天下午查了半天资料,今天上午来,看api的时候看到一个东西
form.on('submit(*)', function(data){
console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象
console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回
console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}
return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
});
就是这个东西,于是我换了个想法,在页面上仍然用
<button lay-submit lay-filter="*">提交</button>
然后在from的过滤时候调用ajax提交
form.on('submit(*)', function(data){
saveOrUpdate(data.field);
return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
});
而data里面有dom对象,form对象,和表单字段,相信已经足够ajax提交的需求了
下面上完整代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>用户编辑页</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugin/layui/css/layui.css">
</head>
<body>
<div class="edit-view">
<form id="editFrom" class="layui-form layui-form-pane1" style="width: 360px; margin-top: 40px;">
<div class="layui-form-item">
<label class="layui-form-label">用户账号</label>
<div class="layui-input-block">
<input id="userAccount" type="text" name="userAccount" lay-verify="required" autocomplete="off" placeholder="请输入账号" class="layui-input" value="${user.userAccount}">
<input id="id" type="hidden" name="id" value="${user.id}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input id="userName" type="text" name="userName" lay-verify="required" autocomplete="off" placeholder="请输入用户名" class="layui-input" value="${user.userName}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<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="*">保存</button>
<%-- <input οnclick="saveOrUpdate()" class="layui-btn" value="保存">--%>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.1.0.js" ></script>
<script src="${pageContext.request.contextPath}/plugin/layui/layui.js" charset="utf-8"></script>
<script>
layui.use(['form','layer'], function(){
var form = layui.form(),
layer = layui.layer;
form.on('submit(*)', function(data){
saveOrUpdate(data.field);
return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
});
});
function saveOrUpdate(field){
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath}/user/saveOrUpdate",
data:field,
dataType: "json",
success: function(data){
if(data.success) {
layer.msg(data.msg,{
shade: [0.1,'#fff'],
offset: '100px'
},function(){
parent.window.location.reload(); // 父页面刷新
});
}else{
layer.msg(data.msg,{
shade: [0.1,'#fff'],
offset: '100px'
});
}
},
error:function () {
layer.msg("请求出错",{
offset: '100px'
});
}
});
}
</script>
</body>
</html>
希望对遇到同样问题的人有帮助
生命不息,折腾不止,与君共勉