前提
有一个el-from
有校验规则,不能为空。我写的规则为必填,失焦触发校验:
const state = reactive({
users: [],
currentPage: 1, // 当前页
pagesize: 2, // 每页显示2条
userFormDialogVisble: false, // 是否展示用户表单
userFormData: {
username: ''
},
rules: {
username: [
{
required: true,
message: "请输入用户名",
trigger: 'blur'
},
]
},
formTitle: "",
showSetRoleDialog: false,
currentUserId: 0,
})
正常的交互应该是:
但是当用户进入该页面不点击输入框的时候,就不会触发校验逻辑,可以向后端提交一个空。
我当时亡羊补牢的做法是,单独加一个判断,判断该字段是否为空:
const handleConfirm = () => {
if (state.userFormData.username === "") {
ElMessage.error("用户名不能为空")
} else {
//逻辑
}
后面带佬指出:这就是shi代码,这个逻辑简单我可以这么写。如果需要校验的字段很多,就需要一个一个去判断,而且展示也会出问题,ElMessage
展示出来的永远之后最后面的错误,改完最后一个错误才会向前校验。
查阅文档发现el-form
自带校验逻辑:validate。用法就是ref.validate
。
vue3与2获取DOM的方法略有一丝不同:
给需要获取的html
元素加ref
:
<el-form ref="userForm" :model="state.userFormData" label-width="100px" :rules="state.rules">
创建ref
响应式常量,名字要与html
中的ref
名字一致。
import {......, ref } from 'vue';
//创建ref响应式常量
const userForm = ref<any>()
再点击事件中添加判断,用法为ref.validate
:
// 新增用户或修改用户
const handleConfirm = () => {
userForm.value.validate((value: boolean) => {
if (value) {
// 逻辑
}