2020年11月24日

layui/layadmin富文本编辑器layedit的正确verify验证方法


layui/layadmin富文本编辑器layedit的正确verify验证方法,layui官网对于layedit的验证也没有提及,关于网上的各种方法也都是五花八门,大部分也是人云亦云,根本用不了,下面这段代码亲测可用,除了layedit的验证,还有富文本框的必填验证等等。

关键性代码

var layedit = layui.layedit;
var index = layedit.build(‘activity’); //建立编辑器,activity为富文本框textarea的id

 

form.verify({
content: function(value) {
return layedit.sync(index); /*关键一步*/

},…

form.on(‘submit(demo2)’, function (data) {

console.log(JSON.stringify(data.field));

/*内容判断*/
if(JSON.stringify(data.field.content)=='””‘){
layer.msg(‘内容不能为空!’, { icon: 5 });
return false;
}

var len = $(“.choicereg:checked”).length;
if (len < 1) {

 

 

完整代码


<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">活动名称 *</label>
<div class="layui-input-inline">
<input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="" class="layui-input">
</div>
</div>


<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">开始时间 *</label>
<div class="layui-input-inline">
<input type="text" name="timestart" lay-verify="required" placeholder="yyyy-MM-dd HH:mm" id="time1" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">结束时间 *</label>
<div class="layui-input-inline">
<input type="text" name="timeend" lay-verify="required" placeholder="yyyy-MM-dd HH:mm" id="time2" class="layui-input">
</div>
</div>
</div>

<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">活动城市 *</label>
<div class="layui-input-inline">
<input type="text" name="" lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">活动地点 *</label>
<div class="layui-input-inline">
<input type="text" name="" lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
</div>

<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">活动人数 *</label>
<div class="layui-input-inline">
<input type="number" name="" lay-verify="required|number" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">人</div>
</div>
</div>

<div class="layui-form-item">
<label class="layui-form-label">活动头图*</label>
<div class="layui-input-inline">
<!--<button type="button" class="layui-btn" id="upload1">上传图片</button>-->

<!-- <input type="text" name="" lay-verify="required" autocomplete="off" class="layui-input">-->
</div>
<div class="layui-form-mid layui-word-aux">图片尺寸建议:108px*64px 的.png、.jpg、.gif图片,图片小于1M</div>
</div>

<div class="layui-form-item">
<label class="layui-form-label">活动外链</label>
<div class="layui-input-inline">
<input type="tel" name="url" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">如果活动是第三方活动,需要填写第三方活动的落地页链接</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">主办方</label>
<div class="layui-input-inline">
<input type="text" name="" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">活动分类 *</label>
<div class="layui-input-inline">
<select name="acttype" lay-filter="aihao" lay-verify="required" >
<option value=""></option>
<option value="0">创投对接</option>
<option value="1">培训</option>
<option value="1">HICOOL Club</option>
</select>

</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">是否直播</label>
<div class="layui-input-inline">
<select name="live" class="live" lay-filter="live" >
<option value=""></option>
<option value="1">有直播</option>
<option value="2">无直播</option>
</select>

</div>
</div>
<div class="layui-inline livelink-box">
<label class="layui-form-label">直播链接</label>
<div class="layui-input-inline ">
<input type="text" name="livelink" autocomplete="off" class=" livelink layui-input">
</div>

</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">活动摘要 *<br/>不超过140字</label>
<div class="layui-input-block">
<textarea placeholder="" name="summary" class="layui-textarea" lay-verify="required|clength" ></textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">活动内容*</label>
<div class="layui-input-block">
<textarea id="activity" name="content" class="layui-textarea" lay-verify="content" style="display: ;"></textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">报名身份*</label>
<div class="layui-input-block">
<input type="checkbox" name="reg[xcgz][]" class="choicereg" lay-filter="choicereg" lay-verify="required" lay-skin="primary" title="现场观众">
<input type="checkbox" name="reg[lyxm][]" class="choicereg" lay-filter="choicereg" lay-verify="required" lay-skin="primary" title="路演项目">
<input type="checkbox" name="reg[tzjg][]" class="choicereg" lay-filter="choicereg" lay-verify="required" lay-skin="primary" title="投资机构" >
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">涉及赛道*</label>
<div class="layui-input-block">
<input type="checkbox" name="track[t1][]" value="1" class="choicetrack" lay-filter="choicetrack" lay-verify="required" lay-skin="primary" title="人工智能/大数据/金融科技" >
<input type="checkbox" name="track[t2][]" value="2" class="choicetrack" lay-filter="choicetrack" lay-verify="required" lay-skin="primary" title="医药健康">
<input type="checkbox" name="track[t3][]" value="3" class="choicetrack" lay-filter="choicetrack" lay-verify="required" lay-skin="primary" title="新一代信息技术" >
<input type="checkbox" name="track[t4][]" value="4" class="choicetrack" lay-filter="choicetrack" lay-verify="required" lay-skin="primary" title="新能源/新材料/智能装备" >
<input type="checkbox" name="track[t5][]" value="5" class="choicetrack" lay-filter="choicetrack" lay-verify="required" lay-skin="primary" title="文化创意" >
<input type="checkbox" name="track[t6][]" value="6" class="choicetrack" lay-filter="choicetrack" lay-verify="required" lay-skin="primary" title="其他高精尖产业方向" >
</div>
<div class="layui-input-inline otherbox ">
<input type="text" name="other" autocomplete="off" class="other layui-input" placeholder="选择其他填写">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">是否公开</label>
<div class="layui-input-inline">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">是</option>
<option value="1">否</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">报名项模板</label>
<div class="layui-input-inline">
<select name="interest" lay-filter="aihao">
<option value=""></option>
</select>
</div>
</div>


<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo2" data-type="content">保存</button>
</div>
</div>
</form>

 


layui.config({
base: 'layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'upload','form', 'laydate','table','dropdown','layedit'], function(){

var dropdown = layui.dropdown;
// 监听菜单点击
dropdown.onFilter('test1', function (event) {
// ...业务代码
console.log(event);
})

//form
var $ = layui.$
,admin = layui.admin
,element = layui.element
,form = layui.form
,layer = layui.layer
,table = layui.table
,laytpl = layui.laytpl;

element.render();



var layedit = layui.layedit;
var index = layedit.build('activity'); //建立编辑器
//自定义验证规则
form.verify({
content: function(value) {
return layedit.sync(index); /*关键一步*/

},
clength: function (value, item) {
if (value.length >140) {
return '不超过140字';
}
}, contact: function (value) {
if (value.length < 4) {
return '内容请输入至少4个字符';
}
}
, phone: [/^1[3|4|5|7|8]\d{9}$/, '手机必须11位,只能是数字!']
, email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/, '邮箱格式不对']
});


form.on('checkbox(choicereg)', function (data) {
console.debug(data);
var len = $(".choicereg:checked").length;
if (len < 1) {
$(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");
$(data.elem).prop("checked", false);

layer.msg('报名身份,请至少选择一项!', { icon: 5 });
return false;
}
});

form.on('checkbox(choicetrack)', function (data) {
console.debug(data);
var len = $(".choicetrack:checked").length;
if (len < 1) {
$(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");
$(data.elem).prop("checked", false);

layer.msg('涉及赛道,请至少选择一项!', { icon: 5 });
return false;
}

//判断其他选项
var arr_box = [];
$('.choicetrack:checked').each(function() {
arr_box.push($(this).val());
});
// console.log(arr_box);
if($.inArray('6',arr_box) < 0){
$('.otherbox').removeClass('on');
$('.other').attr('lay-verify','');
}else{
$('.otherbox').addClass('on');
$('.other').attr('lay-verify','required');
}

});
//是否直播 链接判断
form.on('select(live)', function (data) {
if(data.value == 1){
$('.livelink-box').addClass('on');
$('.livelink').attr('lay-verify','required');
}else{
$('.livelink-box').removeClass('on');
$('.livelink').attr('lay-verify','');
}

});


form.on('submit(demo2)', function (data) {

console.log(JSON.stringify(data.field));

/*内容判断*/
if(JSON.stringify(data.field.content)=='""'){
layer.msg('内容不能为空!', { icon: 5 });
return false;
}

var len = $(".choicereg:checked").length;
if (len < 1) {

layer.msg('报名身份,请至少选择一项!', { icon: 2 });
return false;
}
var len1 = $(".choicetrack:checked").length;
if (len1 < 1) {

layer.msg('涉及赛道,请至少选择一项!', { icon: 2 });
return false;
}
// var type = $(this).data('type');
// active[type] ? active[type].call(this) : '';
// alert(1);

//ajax
//console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象
//console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回
//console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value};获取单个值data.field["title"]
//return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。

});
});

标签:, ,

微信扫一扫二维码访问