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

news2024/11/27 6:15:08

一. 表单校验

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页(此时会新打开一个标签页。解决办法：router.go(-1))
 */
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)
}