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

复制代码
<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 获取任意表单引用对象) ,然后通过引用对象来调用该方法。

比如上面引用的ref='dom' 的表单组件 我们可以 dom.value.clearValidate(); 清除整个表单的验证信息

相关推荐
Senar17 分钟前
Web端选择本地文件的几种方式
前端·javascript·html
烛阴1 小时前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_12541 小时前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx1 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
周之鸥2 小时前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
前端snow2 小时前
前端全栈第二课:用typeorm向数据库添加数据---一对多关系
前端·javascript
全栈老李技术面试3 小时前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题
kadog3 小时前
PubMed PDF下载 cloudpmc-viewer-pow逆向
前端·javascript·人工智能·爬虫·pdf
乌夷4 小时前
使用spring boot vue 上传mp4转码为dash并播放
vue.js·spring boot·dash
fxshy4 小时前
ai聊天流式响应,阻塞式和流式响应 nginx遇到的坑
运维·javascript·nginx