vue3 搭配ElementPlus做基础表单校验自定义表单校验

news2024/12/23 11:32:34

<script setup>
import { ref, reactive } from 'vue'

// 表单元素
const dom = ref(null)
// 校验规则
const rules = {
  name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
    //校验手机号格式
  phone: [{ required: true, message: "请输入电话", trigger: "blur" },{ pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: "请输入合法手机号/电话号", trigger: "blur" }],
}
// 绑定数据
const form = reactive({
  name: '',
    phone:''
})
// 测试方法
const onSubmit = () => {
  console.log('提交数据', form)
  // 开始校验
  dom.value.validate(valid => {
    console.log('校验结果', valid)
  })
}
</script>

<template>
  <el-form ref="dom" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="名称" prop="name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="手机号" prop="phone">
      <el-input v-model="form.phone" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">测试</el-button>
    </el-form-item>
  </el-form>
</template>

上面是第一种普通校验跟vue2类似通过ref获取元素定义规则表提交时进行校验validate看是否通过了校验

二,自定义校验一般校验手机号邮箱等的规范合法性

.........


const validatePhones = (rule: any, value: any, callback: any) => {
  if (value !== '') {
    const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}(,1[3|4|5|6|7|8|9][0-9]\d{8})*$/;
    if (!reg.test(value)) {
      return callback(new Error('手机号码输入格式不正确'));
    } else { 
      return callback(); // *验证成功的地方必须callback()
    }
  }else {
    return callback(new Error('必填字段'));
  }
}
 

const rules = reactive({
  phone: [
    {
      validator: validatePhones,
      trigger: 'blur',
    }
  ],
})

...........

校验规则的函数接受3个参数：`rule`、`value`和`callback`

- `rule`参数: 这个参数是用来传递验证规则的，包含了一些验证的配置选项，比如最大长度、最小长度等。在这个函数中，我们没有使用到该参数。

- `value`参数: 这个参数是要被验证的手机号码的值。

- `callback`参数: 这个参数是用来通知验证结果的回调函数，它接受一个可选的 `Error` 对象作为参数。如果验证通过，可以通过调用 `callback()` 方法来通知验证成功，而不传递任何参数。如果验证失败，可以通过调用 `callback(new Error('错误信息'))` 方法来通知验证失败，并将错误信息传递给它。

在函数内部，我们首先检查 `value` 的值是否为空字符串 `''`，如果是空字符串，则调用 `callback` 方法，传入一个新的 `Error` 对象，对象的错误信息为 `'必填字段'`。

如果 `value` 不是空字符串，我们使用正则表达式 `/^1[3|4|5|6|7|8|9][0-9]\d{8}(,1[3|4|5|6|7|8|9][0-9]\d{8})*$/` 来验证手机号码的格式。如果格式不正确，我们也会调用 `callback` 方法，传入一个新的 `Error` 对象，对象的错误信息为 `'手机号码输入格式不正确'`。

如果手机号码格式正确，我们调用 `callback()` 方法，通知验证成功，不传递任何参数。

需要拿到引用对象 (通过ref获取任意表单引用对象)，然后通过引用对象来调用该方法。