前言
以下内容都是基于element Plus 和 vue3
一个form-item校验两个下拉框
有时候不可避免会遇到需要一个form-item校验两个下拉框的情况，比如：
这种情况下传统的校验已经无法实现，需要通过form表单提供的自定义校验来实现。以上面的必填为例
<el-form-item label="工作时报" prop="workStartTime">
<el-select
v-model="states.formData.workStartTime"
filterable
style="width: 120px"
placeholder="请选择"
clearable
>
<el-option
v-for="item in states.workStartTimeList"
:key="item.completeTime"
:label="item.label"
:value="item.completeTime"
/>
</el-select>
<span style="padding: 0px 5px"> ~ </span>
<el-select
v-model="states.formData.workEndTime"
filterable
style="width: 120px"
placeholder="请选择"
clearable
ref="workEndTimeRef"
>
<el-option
v-for="item in states.workEndTimeList"
:key="item.completeTime"
:label="item.label"
:value="item.completeTime"
/>
</el-select>
</el-form-item>
const validatePass = (rule: any, value: any, callback: any) => {
let workEndTime = workEndTimeRef.value.selected.value
if (value && workEndTime) {
// 校验成功，这里也可以一些其他逻辑
callback()
} else {
callback(new Error('工作时报不能为空'))
}
}
const rules = reactive({
workStartTime: [
{
required: true,
validator: validatePass,
trigger: 'change',
},
],
})
注意点：
1、定义的校验方法要放在校验规则上面，不然会提示找不到方法
2、这点最重要，首先form-item上绑定的属性是workStartTime，所以你校验方法中只能拿到该属性对应的值。另一个下拉的值要先获取到，你必须在下拉上绑定一个ref
你可以通过打印这个ref来找到另一个下拉的值。当第一个下拉改变后就会触发校验，这时只需要判断两个下拉是否都已经有值，如果没有值，返回提示信息就好。
补充
最好是在自定义校验外面添加一个延时函数。因为在业务修改回显时，当有一个值赋值后立马就会触发校验，但这时还没有执行到另一条数据的赋值。就会出现，两条数据赋值完后，提示校验失败
这种方案失败了，因为输入开始时间就会触发校验；又因为结束时间没填，会出现警告提示。然后测试人员和产品经理说丑，让人不理解。哎，心累
最新沟通的解决方案是拆成两个校验
结束时间上也是存在必填星号和label的，通过修改样式让其看不见（最好外面套一个类，避免影响其他的样式）
.work-endtime {
:deep(.el-form-item__label) {
opacity: 0;
}
}
下拉框加一个二次确认，确认值是否改变
以下图为例，当计划类型值的改变时需要清空其他值时，这时最好给与一个二次确认。确认是否改变，而不是直接改变，导致其他数据被清空，这样会很奇怪。
这里的问题是，当取消后应该显示原来显示的值。最初想的方向有点错了，想通过监听来实现，当取消时直接将旧值赋值给绑定的属性，但实际结果是监听一直被触发，确认弹窗无法被关闭。
其实实现起来挺简单，最怕的就是方向想错了。可以定义一个变量来保存旧值，然后将二次确认弹窗的部分加到下拉框change事件里
// 计划类型改变事件
const planTypeChange = val => {
if (states.lastPlanType) {
E_Msg.confirm('提示', '计划类型改变将清空所有资源对应的编码，是否确认修改？')
.then(() => {
emits('planTypeChange', val, true)
})
.catch(() => {
states.formData.planType = states.lastPlanType
})
} else {
states.lastPlanType = val
}
}
当第一次下拉选择时，不应该弹出二次确认，这时将当前选择的值记录，当下次下拉改变后，就会进行提示。
这里不用判断记录的值是否和当前选择的值相同，只有当下拉值改变后，才会触发change事件。change事件触发了，一定说明值改变了。
获取form校验的返回结果
有时候因为业务逻辑比较复杂，就会进行组件拆分。这时遇到的问题时，如何在父组件里获取到子组件校验后的返回值。查了一下确实可以实现
// 子组件
//获取表单数据
const getFormData = () => {
return baseFormRef.value.validate().then(res => {
console.log('校验结果：', res)
if (res) {
// 校验成功，将表单数据返回
return states.formData
}
})
.catch(err => {
console.log('错误：', err)
return false
})
}
// 父组件，子组件的返回值是一个promise函数，这里要进行处理
// 这里比较特殊，父组件也需要进行校验，正常情况添加上 async和await就好
formRef.value.validate(async valid => {
if (valid) {
// 基本信息
const baseData = await baseRef.value.getFormData()
// 资源信息
const resourceData = resourceRef.value.getFormData()
console.log('保存的信息：', baseData, resourceData)
if (baseData && resourceData) {
}
}
})
注：
最近发现了一个问题，你的表单校验不通过时的逻辑要写在catch里
// 正确
return baseFormRef.value.validate().then(res => {
console.log('校验结果：', res)
if (res) {
// 校验成功，将表单数据返回
return states.formData
}
})
.catch(err => {
console.log('错误：', err)
return false
})
// 错误，当有未填写的表单时，会执行catch，用于不会走else
return baseFormRef.value.validate().then(res => {
console.log('校验结果：', res)
if (res) {
// 校验成功，将表单数据返回
return states.formData
}else{
}
})
在表格中嵌套表单进行校验
之前写了一篇如何实现的文章：表格嵌套表单的校验
效果图如上，是在表单项下面显示的校验信息。但是可能是产品经理绝对不好看，统一改成下面这种格式。表格里只显示红框，统一在表格上面显示提示信息
其实表单的校验信息还在，只是修改了一下margin-bottom给挡住了
:deep(.table .el-form-item) {
margin-bottom: 0;
}
一开始把只是校验必填，在保存的时候循环一下就好了。后来又有了手机号、邮箱等校验，就想着循环判断值不好。查了下官方文档，刚好form组件上有一个validate 事件
const formvalidate = (prop, isValid, message) => {
console.log('校验了', prop, isValid, message)
}
当你调用表单检验的方法时，该事件会执行。prop 是表单上绑定的属性，isValid 是该字段是否校验通过，message 是校验不通过时显示的信息。
基于该事件可以实现想要的功能
const formvalidate = (prop, isValid, message) => {
console.log('校验了', prop, isValid, message)
if (isValid) {
if (states.checkKeys.has(prop)) {
states.checkKeys.delete(prop)
}
} else {
states.checkKeys.add(prop)
}
if (states.checkKeys.size == 0) {
states.warningTextMsg = ''
states.warningTextShow = false
} else {
if (message == '手机号格式不正确' || message == '邮箱格式不正确') {
states.warningTextMsg = '以下信息格式不正确'
} else {
states.warningTextMsg = '以下必填信息不能为空'
}
states.warningTextShow = true
}
}
states.checkKeys 是一个Set对象，在一开始的时候就初试话为一个空的Set。Set 比数组更加有优势，方便执行一些操作。
上面大体意思是如果字段没有校验通过则存储prop属性，如果校验通过则删除该属性。具体逻辑就不说了，没啥东西，最后实现的效果如下图：
