layui使用经验总结（四）——“提交”相关内容总结

墨蓝 2024-04-19 11:34 49阅读 0赞

## 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;
    			        }
    		       
    		  });