大意了
// 正确的写法
let x;
({x} = {x: 1});
// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error分类 JavaScript 下的文章
css3 大于3行的显示点点点
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3; /**可以修改显示行数。 必须设置 height 属性，不然不生效。**/layui防止按钮被重复提交
1.html
<button type="button" class="layui-btn submit-btn" lay-submit lay-filter="submit-btn">送审</button>
2.1.js
form.on('submit(submit-btn)', function(data){
//1.防止重复提交:单击之后提交按钮不可选
let DISABLED = 'layui-btn-disabled';
//2.防止重复提交:增加样式
$('.submit-btn').addClass(DISABLED).attr('disabled', 'disabled');
objs.ajax(data,'{{ route("member.process.submit") }}');
});
2.2js回调里面
{
layer.msg(result.msg,{icon:2,time:1000});
//3.防止重复提交
$('.submit-btn').removeClass(DISABLED).removeAttr('disabled');
}关闭多级iframe的父窗体
//会签
form.on('submit(routing-btn)', function(data) {
//console.log(data);
layer.open({
type: 2,
title: '选择会签人',
shade: 0.1,
area: ['80%', '80%'],
content: '{{ route("member.process.routing.create") }}?entry_id=' + data.field.entry_id,
success: function(layero, index){
//获取iframe内的button值（判断返回的）
let body = layer.getChildFrame('body', index);
let values = body.find('button').val();
if (values) {
layer.msg('有会签尚未处理，请耐心等待', {
icon: 2,
time: 1500
}, function() {
layer.close(index);
//table.reload('xf-data-table');
});
}
},end: function () {
parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
window.parent.location.reload();
parent.layui.table.reload("xf-data-table");
}
});
});layui模板内处理时间与条件判断
1、templet: '<div>@{{ layui.util.toDateString(d.created_at, "yyyy-MM-dd HH:mm:ss") }}</div>'
2、templet: '<div>@{{# if(d.step_handle_way === "serial"){ }} 串行 @{{# }else{ }} 并行 @{{# } }}</div>'不同按钮提交到不同页面
不同按钮提交到不同form页面
<input type=button onclick="form.action='backup.html';form.submit()" value="标题一">
<input type=button onclick="form.action='optimize.html';form.submit()" value="标题二">
<input type=button onclick="form.action='repair.html';form.submit()" value="标题三">layui/laydate计算两个日期之间天数
html
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">日期范围</label>
<div class="layui-inline" id="dateRank">
<div class="layui-input-inline">
<input type="text" lay-verify="required" autocomplete="off" name="start_time" id="start_time" class="layui-input" placeholder="开始日期">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline">
<input type="text" lay-verify="required" autocomplete="off" name="end_time" id="end_time" class="layui-input" placeholder="截止日期">
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label layui-require">天数</label>
<div class="layui-input-inline">
<input name="days" lay-verify="required" class="layui-input" autocomplete="off" id="days" placeholder="请选择开始与截止日期">
</div>
<div class="layui-input-inline" style="width: 100px;">
<input type="button" value="计算天数" onclick="check()" class="layui-btn">
</div>
</div>
</div>
js
<script>
layui.use(['layer','laydate','form'],function(){
let form = layui.form;
let $ = layui.jquery;
let layer = layui.layer;
let laydate=layui.laydate;
//选择开始时间
laydate.render({
elem: '#dateRank',
range: ['#start_time', '#end_time'],
});
});
//计算日期
function check(){
let start=document.getElementById("start_time").value;//获取起始日期
let end=document.getElementById("end_time").value;//获取结束日期
if(start === ""){
layer.msg("请选择开始日期！", {icon:2,time:1500});
}
else if(end === ""){
layer.msg("请选择截止日期！", {icon:2,time:1500});
}
document.getElementById("days").value=getDays(start, end);
}
//返回计算天数值
function getDays(startDate,endDate){
let date1Str = startDate.split("-");//将日期字符串分隔为数组，数组元素分别为年、月、日
//根据年、月、日的值创建Date对象
let date1Obj = new Date(date1Str[0],(date1Str[1]-1),date1Str[2]);
let date2Str = endDate.split("-");
let date2Obj = new Date(date2Str[0],(date2Str[1]-1),date2Str[2]);
let t1 = date1Obj.getTime();//返回从1970-1-1开始计算到Date对象中的时间之间的毫秒数
let t2 = date2Obj.getTime();//返回从1970-1-1开始计算到Date对象中的时间之间的毫秒数
let datetime = 1000*60*60*24; //一天时间的毫秒值
let minusDays = Math.floor(((t2-t1)/datetime));//计算出两个日期天数差
let days = Math.abs(minusDays);//如果结果为负数，取绝对值
//console.log(days);
if(!days) { //在没有选择开始或结束日期时返回"NaN"类型，所以做此判断
return '';
}
return days + 1;
}
</script>
写在后面：
本文内容主要是参考/拷贝互联网稍加改动，具体网址不记得了，若有冒犯，请联系我删除。13073932#163.com
给a超级链接增加点击layui.open()方法
话不多说，上代码：
html
<a href="javascript:;" id="formLink">
我是要显示的文字
<input type="hidden" value="{ $url }" id="content">
</a>
js
$('#formLink').on('click', function(){
let href = $('#content').val()
//console.log(href);
layer.open({
type: 2,
title: '新增',
shade: 0.1,
area: ['80%', '80%'],
content: href,
});
});
layui动态渲染select表单
动态渲染select表单
form.on('radio(xf_step_type)', function (data) {
let radioVal = $('#IsPurchased input[name="processor_type"]:checked ').val();
var param;
if (radioVal === "member") {
param = 'member';
}else if(radioVal === "department"){
param = 'department';
}else{
param = 'position';
}
//请求数据
$.ajax({
url:'/manage/public/select_table/' + param,
dataType:'json',
type:'post',
async:false,
headers:{"X-CSRF-TOKEN" : $('meta[name="csrf-token"]').attr('content')},
success:function(res){
//先清空select列表数据
$("#processor").empty();
$.each(res.data,function(index,item){
//方法一
$('#processor').append(new Option(item.title,item.id));
//方法二 往下拉菜单里添加元素
//$("#processor").append("<option value='"+item.id+"'>"+item.title+"</option>");
})
form.render();//菜单渲染 把内容加载进去
}
});
//form.render();
});常用的前后端验证（layui+tp）收藏备用
一、前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开户注册</title>
</head>
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
#captcha{
float: left;
}
#code{
float: left;
}
#text{
line-height:20px;
}
</style>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>开户注册</legend>
</fieldset>
<form class="layui-form" action="save" method="post">
<div class="layui-form-item">
<label class="layui-form-label">开户银行</label>
<div class="layui-input-block">
<input type="text" name="bank" lay-verify="required|bank" autocomplete="off" placeholder="请输入银行" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开户账号</label>
<div class="layui-input-block">
<input type="text" name="accout" lay-verify="required|number" autocomplete="off" placeholder="请输入账号" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">真实姓名</label>
<div class="layui-input-block">
<input type="text" name="name" lay-verify="required|name" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入真实姓名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">身份证号码</label>
<div class="layui-input-block">
<input type="text" name="idcard" lay-verify="required|identity" placeholder="请输入身份证号码" autocomplete="off" class="layui-input">
</div>
</div>
<br>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">图形验证码</label>
<div class="layui-input-inline">
<input type="tel" name="captcha" lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
</div>
<span><div id="captcha">{:captcha_img()}</div></span><span id="text"><a href="">看不清楚！点击图片换一张？</a></span>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">手机号</label>
<div class="layui-input-inline">
<input type="tel" id="phone" name="phone" lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
</div>
<input type="button" id="btn" value="免费获取验证码" class="layui-btn" onclick="settime(this)" />
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">短信验证码</label>
<div class="layui-input-inline">
<input type="tel" id="code" name="code" lay-verify="required|code" placeholder="请输入接收的验证码" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<br><br>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit="save" >立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</body>
</html>
<script src="/layui/layui.js" charset="utf-8"></script>
<script>
layui.use(['form', 'layedit', 'laydate'], function(){
var form = layui.form
,layer = layui.layer
,layedit = layui.layedit
,laydate = layui.laydate;
//日期
laydate.render({
elem: '#date'
});
laydate.render({
elem: '#date1'
});
//创建一个编辑器
var editIndex = layedit.build('LAY_demo_editor');
//自定义验证规则
form.verify({
title: function(value){
if(value.length < 5){
return '银行名称至少得5个字';
}
},
accout: function(value){
if(value.length < 5){
return '账户至少得5个字符啊';
}
},
code: function(value){
if(value.length < 3){
return '验证码格式不正确';
}
},
name: function(value) {
if(!new RegExp("^[\u4e00-\u9fa5\]+$").test(value)){
return '姓名只能是中文';
}
},
bank: function(value) {
if(!new RegExp("^[\u4e00-\u9fa5\]+$").test(value)){
return '银行只能是中文';
}
}
,pass: [
/^[\S]{6,12}$/
,'密码必须6到12位，且不能出现空格'
]
,content: function(value){
layedit.sync(editIndex);
}
});
//监听提交
form.on('submit(demo1)', function(data){
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
return false;
});
//表单取值
layui.$('#LAY-component-form-getval').on('click', function(){
var data = form.val('example');
alert(JSON.stringify(data));
});
});
</script>
<script type="text/javascript">
var countdown=60;
function settime(val) {
if (countdown == 0) {
val.removeAttribute("disabled");
val.value="免费获取验证码";
countdown = 60;
} else {
val.setAttribute("disabled", true);
val.value="重新发送(" + countdown + ")";
countdown--;
setTimeout(function() {
settime(val)
},1000)
}
}
layui.use('layer', function(){
var layer = layui.layer;
$(function (){
//获取手机号 发送验证码
$('#btn').click(function (){
let phone=$('#phone').val();
$.post('/api/send',{phone:phone},function (res){
console.log(res.msg)
if (res.code==200){
layer.msg(res.msg);
alert(res.msg)
}
})
})
})
});
</script>
二、后端代码
/**
* 保存新建的资源
*
* @param \think\Request $request
* @return \think\Response
*/
public function save(Request $request)
{
$data=$request->param();
$validate = \think\facade\Validate::rule([
'phone|手机号' => 'require|mobile',
'captcha|验证码'=>'require|captcha',
'name|真实姓名'=>'require|chs',
'bank|银行名称'=>'require|chs',
'code|短信验证码'=>'require|alphaDash',
'idcard|身份证'=>'require|idCard',
]);
//验证参数
if (!$validate->check($data)) {
die($validate->getError());
}
}
本文转自：https://blog.csdn.net/array_sum/article/details/117608907