layui的使用小技巧

本文介绍了layui框架中的一些实用技巧,包括表单验证、表单元素状态控制及计时器的使用。同时,详细讲解了layui的常用模块,如rate(评分)、form(表单)、upload(图片上传)、slider(滑块)以及element(元素操作),帮助开发者更好地理解和应用layui。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

layui 表单

1.表单自带校验

lay-verify:是表单验证的关键字

2.移除pnum的只读属性

  $('#pnum').removeAttr('readonly');//让输入框可以输入

3.对于单纯的select,可以用disabled属性让其变成灰色不可选状态,用一下方法让其恢复可选:

$("#roleSelector").removeAttr("disabled");
  //自定义方法
	function fun_changebtn(selector, flag, content) {
			if (flag) {
				//启用
				$(selector).removeAttr('disabled');
				$(selector).attr('class', 'layui-btn layui-bg-green')
			} else {
				//禁用 ,改变或设置被选元素的属性值
				$(selector).attr('disabled', 'disabled');
				$(selector).attr('class', 'layui-btn layui-bg-gray')
			}
			$(selector).html(content); //按钮显示的内容
		}
		

4.清除这个计时器

var myTimer; //计时器
   	 clearInterval(myTimer);

5.计时器:下图是一个使用到计时器的小代码块, 创建计时器的方法为:var myTimer=setInterval(function(){},1000);//第一个参数为设置时间倒数的方法,第二个参数为1000ms。

    var second=30;
    var myTimer; //计时器
					    //创建一个计时器,每个1秒中执行一次函数
					    myTimer=setInterval(function(){
					    	console.info(second);
					    	$('#find').html(second+"s");
					    	if(second==-1){
					    		//清除这个计时器
					    		clearInterval(myTimer);
					    		fun_tip('red','重新点击按钮发送短信验证!'); //显示提示信息
					    		fun_changebtn('#find', true, '验证码'); //启用按钮
					    		$('#pnum').val('');
					    		$('#pnum').attr('readonly','readonly');
					    		mobile_code='';
					    	}
					    	second--;
					    },1000);
二,layui模块中一些常用的模块

1.rate-----------------评分表,个人更喜欢叫星级表
在这里插入图片描述2.form-------------表单,主要用于提交数据给后台。

<form id="registerForm" action="RegisterServlet" method="post"
		enctype="multipart/form-data">
		<label>用户名</label> <input type="text" id="userName" name="userName">
		<br> <label>密码</label> <input type="password" id="userPwd"
			name="userPwd"> <br> <label>确认密码</label>
		<!-- 不用提交给后台,就不用给name -->
		<input type="password" id="rePwd" name="rePwd"> <br> <label>手机</label>
		<input type="text" id="userPhone" name="userPhone"> <br>
		<label>头像</label> <input type="file" name="file"
			accept="jpg,jpeg,gif,png"> <br>

		<button type="submit">注册</button>
	</form>
  1. upload---------图片上传 var upload = layui.upload;:可以用input输入框,和button按钮
    在这里插入图片描述4.slider ---------------------滑块 var slider = layui.slider;
    在这里插入图片描述
    5.element -------------------监听选项卡 var element = layui.element;
    6.1、bai./是当前目录

2、…/是父级目录

3、/是根du目录

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值