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(); 清除整个表单的验证信息

相关推荐
Mintopia27 分钟前
Three.js粒子系统开发实战:从基础到性能优化
前端·javascript·three.js
Promise52027 分钟前
大屏"跑马灯" 长列表性能优化
前端·javascript
子玖28 分钟前
初始化项目前的准备
前端·javascript·vue.js
Mintopia28 分钟前
Three.js进阶实战:打造动态光影交互场景 ——结合环境光、聚光灯与相机控制的沉浸式体验
前端·javascript·three.js
Carlos_sam30 分钟前
OpenLayers:封装Overlay的方法
前端·javascript
Json_33 分钟前
使用uni-app框架 写电商商城前端h5静态网站模板项目-手机端-前端项目练习
前端·javascript·vue.js
海底火旺34 分钟前
JavaScript中的“先有鸡还是先有蛋”——变量提升的奥秘
前端·javascript
the_flash35 分钟前
JS拖动的原理
前端·javascript
你的人类朋友36 分钟前
解释一下Node.js的『阻塞』现象,并回答:为什么会阻塞?什么情况下会阻塞?
javascript·后端·node.js
旧识君1 小时前
前端图片压缩实战:基于compressorjs的高效解决方案
前端·javascript·vue.js