layui点击、提交事件三种方式
普通点击
<button type="button" class="layui-btn layui-btn-sm layui-btn-success" id="draft">reset</button>
$("#reset").on("click",function(){
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index);
history.back();
});
name包含某字符串控件点击
$("body").on('click',"input[name$='spareCategoryName']",function(){
var categoryIds = toChooseCategory(this);
});
方法点击
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="cancelWindow()">取消</button>
function cancelWindow()
表单提交
form.on('submit(one)', function(data) {
layer.load();
var post=$.post("${base}/add.json", data.field, function(res) {
}
}
ajax提交
form.on('submit(submit)', function(data) {
var telephone =$("#telephone").val();
$.ajax({
type:"post",
url: '${base}/login/modify.json',
data: {"telephone":telephone},
success: function(data){
layer.confirm('修改成功!', {
btn: ['确定'] //可以无限个按钮
}, function(index){
window.location.href=base + "/login/welcome.html";
});
}
});
return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可
});
绕过表单验证提交
//鼠标离开时保存项目数据
$("#projectForm").on('blur', "input", function() {
$.post("${base}/${extParams.controllerUrl}/add.json?currentSteps=1", $("#projectForm").serialize(), function(res) {
})
})
注意:需要序列化 Form表单中input标签的值,那么就需要给input标签添加相应的name属性
检查你需要序列化的标签的属性是disabled,如果是的话,把disabled属性用readonly替换即可
form表单如果有两个id表单序列化无效,为空
$("#projectForm").serialize()表单序列化
添加和编辑是一个页面(添加是在页面上,修改是弹框页面)
layui判断是否是子页面,调用跳转方法
// 判断是否为子页面
var index = parent.layer.getFrameIndex(window.name);
if (index) {
parent.window.location.href = ‘KaTeX parse error: Expected 'EOF', got '}' at position 44: …ist.html'; }̲ else { wi…{base}/projectApply/toApplyList.html’;
}
关闭当前弹出层
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index);
layui弹框
(不能像js原生的alert一样中止执行,还是会执行下面的语句,加window.location.href提示一出立马跳转)
简单提示
layer.alert('欢迎!');
时效提示
layer.msg("", {
time: 1000, //2s后自动关闭
shade:0.6
}, function(){
window.location.href=base + "/login/welcome.html";
});
}
按钮监控提示
layer.confirm('修改成功!', {
btn: ['确定'] //可以无限个按钮
}, function(index){
window.location.href=base + "/login/welcome.html";
});
按钮监控提示及关闭按钮监控
layer.open({
content: '密码已被重置为默认密码,请立刻修改您的账户密码!'
,btn: ['确认']
,yes: function(index, layero){
window.location.href= "${base}/login/reset.html";
}
,cancel: function(){
window.location.href= "${base}/login/reset.html";
}
});
弹页面
layer.open({
type : 2,
title: data.TITLE,
moveOut: true,
shade:0,
resize:true,
maxmin:true,
skin: 'layer-skin layer-skin-max',
area: ['90%','90%'],
content : [ '${base}/projec/toView.html, 'no' ]
});
表单自定义验证规则
lay-verify=“required|code”
form.verify({
code: function(value){
var remindVal = null;
var str = $("#strField3").val();
console.log(str);
var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,18}$/;
if(!reg.test(str)) {
remindVal = "必须18位数字或字母由组成";
}
return remindVal;
}
});