【Vue3 + ElementUI】表单校验无效（写法：this.$refs[‘formName‘].validate((valid) =＞{} )）

一. 表单校验

1.1 template模块

el-form 中若校验，ref 和 rules 必须要有

<template><div style="padding:20px"><el-form ref="formName" :model="form" :rules="formRules"  label-width="120px"><template v-if="type == '查看'"><el-form-item><el-col :span="12"><el-form-item label="联系人" prop="contactName"><span>{{ form.contactName }}</span></el-form-item></el-col><el-col :span="12"><el-form-item label="学历" prop="education"><span>{{ form.education}}</span></el-form-item></el-col></el-form-item><el-form-item><el-col :span="12"><el-form-item label="手机号" prop="phone"><span>{{ form.phone }}</span></el-form-item></el-col><el-col :span="12"><el-form-item label="邮箱" prop="email"><span>{{ form.email }}</span></el-form-item></el-col></el-form-item><template><template v-else><el-form-item><el-col :span="12"><el-form-item label="联系人" prop="contactName"><el-input v-model="form.contactName" placeholder="请输入联系人" maxlength="20" show-word-limit /></el-form-item></el-col><el-col :span="12"><el-form-item label="学历" prop="education"><el-input v-model="form.education" placeholder="请输入学历" maxlength="20" show-word-limit /></el-form-item></el-col></el-form-item><el-form-item><el-col :span="12"><el-form-item label="手机号" prop="phonenumber"><el-input v-model="form.phonenumber" placeholder="请输入手机号" maxlength="11" show-word-limit /></el-form-item></el-col><el-col :span="12"><el-form-item label="邮箱" prop="email"><el-input v-model="form.email" placeholder="请输入邮箱" maxlength="20" show-word-limit /></el-form-item></el-col></el-form-item><template></el-form><div v-if="type == '修改'"><el-button @click="handleClick">取 消</el-button><el-button type="primary" @click="handleSubmit">确 认</el-button></div></div>
</template>

1.2 script 模块

<script setup name="Detail">
import { validPhoneNumber, validEmail } from '@/utils/validate'
import { update } from "@/api/xxx"const { proxy } = getCurrentInstance()
const router = useRouter() // 用于进行路由的导航操作（跳转等）
const route = useRoute() // 获取当前路由的信息
const detailId = route.params.id // 该条数据的唯一主键 id，用于传参
const type = ref('') //  编辑 or 查看// 监听路由并赋值给type字段（type的值为：查看/修改）
watch(() => route.query.type,newValue => {type.value = newValue
},{deep: true, immediate: true}
)// 定义
const data = reactive({form: {},rules: {contactName: [{ required: true, message: '名称必填', trigger: 'blur' }],phonenumber: [{message: '请输入正确的手机号',trigger: 'blur',validator(rule, value, callback) {if (value && value !== '') {if (validPhoneNumber(value)) {return true} else {return false}} else {callback() // 必须返回，不然校验时获取不到vaild的值}}}],email: [{message: '请输入正确的邮箱',trigger: 'blur',validator(rule, value, callback) {if (value !== '' && value !== null) {if (validEmail(value)) {return true} else {return false}} else {callback() // 必须返回，不然校验时获取不到vaild的值}}}]}
})// 重置表单
const reset = () => {form.value = {contactName: '',education: '',phonenumber: '',email: ''}proxy.resetForm('formName')
}
const { form, rules } = toRefs(data)/*** 点击确认*/
const submitForm = () => {// 详细查看 1.2.1 
}/*** 点击取消：跳转到XXX页*/
const handleClick = async () => {await router.push({ path: `/xxx` })
}
</script>

1.2.1 校验rules中全部字段

validate

/*** 点击确认：校验 rules中全部字段*/
const submitForm = () => {console.log('点确认了吗');proxy.$refs['formName'].validate(valid => {console.log(valid, '是否校验成功');if (valid) {if (type === '修改') {update({ id: detailId, ...form.value }).then(res => {if (res.code === 200) {proxy.$modal.msgSuccess('修改成功')handleClick()}})}}})
}

遇到的问题

描述：this.$refs[‘formName’].validate((valid) =＞{} )）无效，即校验成功但获取不到valid的值
打印截图
原因：rules中每个字段，在自定义校验规则时的 validator 中。每个 if 都要对应一个 else ，且每个条件下都要确保执行 callback
解决
① 解决前

② 解决后

1.2.2 校验 rules 中指定字段

某个字段：validateField('xxx',vaild=>{})
某俩字段：validateField(['xxx', 'xxx'], valid =>{})

/*** 点击确认：校验 rules中指定字段*/
const submitForm = () => {proxy.$refs['formName'].validateField('phonenumber', valid => {if (valid) {if (type === '修改') {update({ id: detailId, ...form.value }).then(res => {if (res.code === 200) {proxy.$modal.msgSuccess('修改成功')handleClick()}})}}})
}

二. 校验规则

2.1 邮箱

/*** @param {string} email* @returns {Boolean}*/
export function validEmail(email) {const reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.(com|cn|net)$/return reg.test(email)
}

2.2 手机号

/*** @param {String} phoneNumber* @returns {Boolean}*/
export function validPhoneNumber(phoneNumber) {const reg = /^1(3|4|5|7|8|9)\d{9}$/return reg.test(phoneNumber)
}