使用Form组件过程中遇到的问题解决
From 的问题汇总
1.监听select的选择事件
<select title="相关单位" id="AAA">
<option value=""></option>
<option value="1">全部</option>
<option value="2">上海</option>
</select>
layui.use(['form'], function(){
var form = layui.form;
form.on('select(AAA)', function(data){
console.log(data.value); // 被选中的值
});
})
2.获 取form表单中字段值的两种方法
方法1：直接通过 DOM 元素获取值
var validEndDateInput = document.getElementById('validEndDate');
var endDateValue = validEndDateInput.value;
console.log(endDateValue); // 输出当前输入框中的日期值
方法 2: 使用 jQuery（如果项目中包含 jQuery）
var endDateValue = $('#validEndDate').val();
console.log(endDateValue); // 输出当前输入框中的日期值
3.两级选择框联动
<select title="国家" name="country" id="country">
<option value="">请选择国家</option>
</select>
<select title="城市" name="city" id="city">
<option value="">请选择城市</option>
</select>
layui.use([ 'jquery','form'],function() {
var $ = layui.jquery;
var form = layui.form;
var targetWeight ='';
form.on('select(country)', function(data){
var elem = data.elem; // 获得 select 原始 DOM 对象
var countryId = data.value; // 获得被选中的国家id
var countryName = this.innerHTML;// 获得选中的国家名称
var selectedOption = elem.querySelector('option[value="' + countryId + '"]'); // 通过value找到对应的option
targetWeight = selectedOption.getAttribute('data-weight'); // 获取data-result属性的值
$.ajax({
url:'syn/findCitys',
method:"GET",
data:{countryId:countryId},
dataType:'json',
success:function(response){
$('#city').find('option:not(:first)').remove();// 清空考核项
var selectElement = document.querySelector('#city');
var jsonString = JSON.stringify(response.data);
var dynamicData = JSON.parse(jsonString);
dynamicData.forEach(function(item) {
var option = document.createElement('option');
option.value = item.itemId;
option.textContent = item.itemName;
option.setAttribute('data-scores', item.score);
selectElement.append(option);
});
form.render('select');
}
});
});
// select 事件
var targetItemName = '';
form.on('select(city)', function(data){
var elem = $(data.elem);
var selectedOption = elem.find('option:selected');
var dataResult = selectedOption.data('scores');
targetItemName = this.innerHTML;// 获得选中的城市名称
form.val("formId", {
"score": dataResult,
"result":Math.round((targetWeight*dataResult)*Math.pow(10, 2)) / Math.pow(10, 2)
});
});
});
4.三级选择框联动
<select name="stuNo" id="stuNo">
<option value="">请输入/选择学号</option>
</select>
<select name="stuName" id="stuName">
<option value="">请输入/选择姓名</option>
</select>
<select name="deptName" id="deptName">
<option value="">请输入/选择班级</option>
</select>
layui.use([ 'jquery','form'],function() {
var $ = layui.jquery;
var form = layui.form;
var student = [[${student}]];
var gradeNo = student.gradeNo;//获得年级
$.ajax({
url : 'student/findBasicInfos/'+gradeNo,
method: 'GET',
dataType: 'json',
success: function(res){
var selectElementNo = document.querySelector('select#stuNO');
var selectElementName = document.querySelector('select#stuName');
var selectElementDeptName = document.querySelector('select#deptName');
if (res.length > 0) {
res.forEach(function (item) {
var optionNo = new Option(item.stuNO, item.stuNO);
var optionName = new Option(item.stuName, item.stuNO); // 将stuName与对应的stuNo关联起来
var optionDeptName = new Option(item.deptName, item.stuNO); // 将deptName与对应的stuNo关联起来
selectElementNo.add(optionNo);
selectElementName.add(optionName);
selectElementDeptName.add(optionDeptName);
});
}
form.render('select');
// 监听stuNo下拉框的change事件
form.on('select(stuNo)', function(data){
var selectedNo = data.value;
// 在stuName下拉框中找到对应的选项并设置为选中状态
$('select#stuName').val(selectedNo);
$('select#deptName').val(selectedNo);
//$('select#stuName').find('option[value="'+selectedNo+'"]').prop('selected', true);// 方法二
form.render('select');
});
form.on('select(stuName)', function(data){
var selectedCName = data.value;
// 遍历stuNo下拉框的option元素，匹配对应的值并选中
$('select#stuNo option').each(function(){
if($(this).val() === selectedCName){
$(this).prop('selected', true);
}
});
// 遍历deptName下拉框的option元素，匹配对应的值并选中
$('select#deptName option').each(function(){
if($(this).val() === selectedCName){
$(this).prop('selected', true);
}
});
form.render('select');
});
}
});
});
5.自定义验证规则
<div class="layui-input-inline">
<input type="text" name="schoolName" id="schoolName" class="layui-input" lay-verify="rule2">
</div>
form.verify({
rule1 : function(value){
if (value.length>250) {
return '最多输入250字';
}
},
rule2 : function(value){
if(value.length<1){
return '不能为空,请选择';
}
}
});
6.表单字段后面加提示
<div class="layui-input-inline">
<select name="stuNO" id="stuNO" lay-filter="stuNO" lay-verify="required">
<option value="">请输入/选择学号</option>
</select>
</div>
<div class="layui-form-mid layui-text-em" id="stuNoTip" style="color:#FF0000"></div>
var textNode = document.createTextNode('注：只能输入/选择'+student.gradeName+'及其子班级内学生的学号');
document.getElementById('stuNoTip').appendChild(textNode);
日期比较(前端处理)
<div class="layui-input-inline">
<input type="text" name="validBeginDate" id="validBeginDate" class="layui-input" readonly="readonly" placeholder="2024-07-30"/>
</div>
<div class="layui-input-inline">
<input type="text" name="validEndDate" id="validEndDate" class="layui-input" readonly="readonly" placeholder="2024-07-31"/>
</div>
layui.use(['laydate'], function(){
var $query = $view.find('#query'); // 查询按钮id
laydate.render({
elem: '#validBeginDate',
trigger: 'click',
type: 'date',
format: 'yyyy-MM-dd'
});
laydate.render({
elem: '#validEndDate',
trigger: 'click',
type: 'date',
format: 'yyyy-MM-dd'
});
// 查询按钮
$query.on('click', function () {
var validBeginDate = $("#validBeginDate").val();
var validEndDate = $("#validEndDate").val();
if((new Date(validEndDate.replace(/-/g,"\/"))) < (new Date(validBeginDate.replace(/-/g,"\/")))){
muframe.alert.warn('查询的结束日期不能早于开始日期');
return false;
}
// 省略
});
});