目录
前言
一、表单验证基础实现
1.1 表单规则配置
1.2 表单数据绑定
1.3 表单提交验证
二、次日的字段未验证
2.1 初始值问题
2.2 el-cascader的clearable属性
2.3 验证规则触发时机
2.4 级联选择器的数据问题
三、注意事项
3.1 初始值与数据类型
3.2 组件事件监听
3.3 验证规则调试
四、本文结语
五、更多操作
前言
在Web开发中，表单验证是确保用户输入合法性的关键环节。这里以一个包含日期、时间、级联选择器的表单为例，详细讲解如何使用Vue+Element UI实现表单验证，并重点解决字段未验证的常见问题。通过代码逻辑解析、注意事项总结，帮助我们快速掌握表单验证的核心技巧。
一、表单验证基础实现
1.1 表单规则配置
在data中定义rules对象，为每个表单项设置验证规则：
<script>
export default {
data() {
return {
rules: {
dutyDate: [
{ required: true, message: "请选择值班日期", trigger: "change" },
],
userId: [
{ required: true, message: "请选择值班人员", trigger: "change" },
],
startTime: [
{ required: true, message: "请选择开始时间", trigger: "change" },
],
endTime: [
{ required: true, message: "请选择结束时间", trigger: "change" },
],
morrow: [
{ required: true, message: "请选择次日选项", trigger: "change" }, // 触发事件为change
],
remark: [
{ required: true, message: "请输入备注", trigger: "blur" },
],
},
};
},
// 其它参数
addCameraDialogVisiable: false, // 弹窗开关
addDutyParams: [
{
dutyDate: "",
userId: "",
remark: "",
morrow: 0, // 初始值设为null（关键点）
startTime: "",
endTime: ""
},
],
dutyPersonList: [],
dutyPersonBanci: [
// 次日选项数据（关键点）
{ value: 1, label: "次日值班" },
{ value: 0, label: "次日休息" },
],
</script> 注释说明：
required: true表示必填项。trigger定义触发验证的事件，如change（选择器）、blur（输入框）。
blur 和 change 的主要区别：
blur：当输入框失去焦点时触发。change：当输入框的值发生变化时触发。
blur 触发于输入框失去焦点时，而 change 则在输入框的值发生改变时触发。
1.2 表单数据绑定
在模板中绑定el-form的rules和ref，并为每个el-form-item指定prop：
<el-dialog title="新增任务" :visible.sync="addCameraDialogVisiable">
<!-- 表单主体 -->
<el-form
:model="addTaskParams[0]"
:rules="rules"
ref="dutyForm"
label-width="120px"
>
<!-- 任务日期 -->
<el-form-item label="任务日期" prop="dutyDate">
<el-date-picker
v-model="addTaskParams[0].dutyDate"
type="date"
placeholder="请选择日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
/>
</el-form-item>
<!-- 负责人（级联选择器） -->
<el-form-item label="负责人" prop="userId">
<el-cascader
v-model="addTaskParams[0].userId"
:options="dutyPersonList"
@change="handleSelectChangePerson"
clearable
/>
</el-form-item>
<!-- 开始时间 -->
<el-form-item label="开始时间" prop="startTime">
<el-time-picker
v-model="addTaskParams[0].startTime"
:picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"
format="HH:mm"
value-format="HH:mm"
/>
</el-form-item>
<!-- 次日安排（关键问题所在） -->
<el-form-item label="次日安排" prop="morrow">
<el-cascader
v-model="addTaskParams[0].morrow"
:options="dutyPersonBanci"
@change="handleSelectChangeBanci"
clearable
/>
</el-form-item>
<!-- 备注 -->
<el-form-item label="任务备注" prop="remark">
<el-input v-model="addTaskParams[0].remark" placeholder="请输入任务备注" />
</el-form-item>
</el-form>
<!-- 按钮区域 -->
<div slot="footer">
<el-button @click="cancelAdd">取消</el-button>
<el-button type="primary" @click="addTaskSure">确定</el-button>
</div>
</el-dialog>逻辑说明：
ref="dutyForm"通过this.$refs.dutyForm访问表单实例。prop字段名需与rules中的键严格一致。clearable允许用户清空选择。
这里的 ref="dutyForm" 中的 dutyForm 是一个自定义的引用名称，用于标识 DOM 元素或组件实例。它不需要在 data 中定义，而是一个 Vue 的特性，允许我们在模板中通过 ref 属性为某个元素或组件注册一个引用名称。
什么是 ref ？ 具体介绍：
ref是 Vue 提供的一个特殊属性，用来给元素或子组件注册一个引用标识。- 在组件中，我们可以通过
this.$refs访问这些被标记的元素或组件实例。
1.3 表单提交验证
在addDudySure方法中调用validate触发验证：
methods: {
// 添加任务确定
addDudySure() {
this.$refs.dutyForm.validate(valid => {
if (valid) {
console.log("提交成功");
} else {
console.log("验证失败");
return false;
}
});
}
}
// 其它函数
// 添加任务
choseAddCamera() {
this.addCameraDialogVisiable = true;
// 获取人员列表
dutyManageApi.personList().then((res) => {
// console.log(res, 123456)
if (res?.code === 200) {
const data = res?.data;
this.dutyPersonList = data.map(item => ({
label: item.name, // 将 name 赋值给 label
value: item.personId // 将 personId 赋值给 value
}));
// console.log(this.dutyPersonList, 123456)
}
});
},
handleSelectChangePerson(value) {
// console.log(value, "负责人")
// 添加编辑时，层级选择器赋值
this.addDutyParams[0].userId = value[0]
this.editDutyParams[0].userId = value[0]
if (!value) this.addDutyParams[0].morrow = null; // 清空时设为null
},
handleSelectChangeBanci(value) {
// console.log(value, "次日安排")
// 添加编辑时，层级选择器赋值
this.addDutyParams[0].morrow = value[0]
this.editDutyParams[0].morrow = value[0]
if (!value) this.addDutyParams[0].morrow = null; // 清空时设为null
},
// 添加任务确定
addDudySure() {
this.$refs.dutyForm.validate((valid) => {
if (valid) {
// 表单验证通过，提交数据
// console.log("提交的数据:", this.addDutyParams[0]);
this.dutyTabelLoading = true;
dutyManageApi.addDuty(this.addDutyParams).then((res) => {
if (res.code === 200) {
this.$message({
message: "新增成功",
type: "su***ess",
});
this.cancelAdd();
this.defineMntrgList();
} else if (res.code === 500) {
this.dutyTabelLoading = false;
}
});
} else {
// console.log("表单验证失败");
return false;
}
});
},
// 取消添加
cancelAdd() {
this.addCameraDialogVisiable = false;
this.resetAdd();
},
// 重置表单
resetAdd() {
this.addDutyParams = [
{
"dutyDate": "",
"userId": "",
"remark": "",
"morrow": 0,
"startTime": "",
"endTime": ""
}
];
this.$refs.dutyForm.resetFields()
},
// 弹框关闭
handleDialogClose() {
this.cancelAdd();
},这段代码实现添加任务的流程：点击触发 choseAddCamera 开启添加任务弹窗并获取人员列表；选择负责人、次日安排时对应方法更新数据；点 “确定”，addDudySure 验证表单，通过就提交，成功有提示、关弹窗、刷列表，点 “取消”，cancelAdd 关弹窗、重置表单。
另外注意：
- this.$refs.dutyForm.validate() 进行表单校验。
- this.$refs.dutyForm.resetFields() 清空表单内容。
二、次日的字段未验证
2.1 初始值问题
如果你发现表单的 次日 没有验证效果，可能是以下原因：v-model 的值类型问题。morrow 的初始值是 0（数字类型），而不是一个空值（如 null 或 ""）。如果 el-cascader 的 v-model 值始终为 0，可能会导致验证逻辑认为它已经有值，从而跳过必填验证。
因此 morrow 的初始值设为0（数字类型）可能导致验证失效，需改为null或空字符串
addDutyParams: [
{
morrow: null, // 初始值设为null
// 其他字段...
}
] 2.2 el-cascader的clearable属性
用户清空选择时，需确保v-model值被正确重置：
<el-cascader
v-model="addDutyParams[0].morrow"
:options="dutyPersonBanci"
@change="handleSelectChangeBanci"
clearable
></el-cascader> 在handleSelectChangeBanci中处理清空逻辑：
handleSelectChangeBanci(value) {
if (!value) this.addDutyParams[0].morrow = null; // 清空时设为null
} 2.3 验证规则触发时机
确保morrow的trigger设置为change：
rules: {
morrow: [
{ required: true, message: "请选择次日选项", trigger: "change" }
]
} 2.4 级联选择器的数据问题
确保dutyPersonBanci包含有效选项：
data() {
return {
dutyPersonBanci: [
{ value: 1, label: "次日值班" },
{ value: 2, label: "次日休息" }
]
};
} 三、注意事项
3.1 初始值与数据类型
- 表单验证绑定：
ref="dutyForm"是一个自定义引用名称，用于标识元素或组件，无需在data中定义，可通过该名称直接访问：this.$refs.dutyForm.validate() 进行表单校验。this.$refs.dutyForm.resetFields() 清空表单内容。 - 数字类型陷阱：如
morrow初始值为0，会被视为已选值，导致必填验证失效。 - 统一数据格式：确保
v-model与options的value类型一致（如Number或String）。
3.2 组件事件监听
- 级联选择器的
@change：监听选择变化并更新数据，避免v-model未同步。 - 清空操作处理：通过
clearable触发的清空需手动重置值。
3.3 验证规则调试
- 控制台日志：通过
console.log查看this.$refs.dutyForm的验证结果。 - 样式检查：确保错误提示未被其他元素遮挡（如
el-form-item的error样式）。
四、本文结语
通过本文的分析，我们不仅实现了完整的表单验证系统，还解决了次日字段的特殊问题。我们需要注意初始值设置、组件事件监听和验证规则的触发时机，才能避免常见陷阱。虽然很简单，但平时要多注意，希望这些经验能帮助您高效构建表单验证逻辑！
五、更多操作
请看，Vue 个人专栏
Vue Develophttps://blog.csdn.***/weixin_65793170/category_12116741.html
