layui的使用小技巧

最新推荐文章于 2024-03-05 10:31:09 发布

豆芋

最新推荐文章于 2024-03-05 10:31:09 发布

阅读量664

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/compruterlearner/article/details/108665143

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了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>

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目录