vue3.0+ts实现表单验证及解决vue-i18n表单验证rules自动触发问题

最新推荐文章于 2024-03-05 16:23:48 发布
原创 最新推荐文章于 2024-03-05 16:23:48 发布 · 4.5k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

解决vue-i18n表单验证rules自动触发问题

技术栈 vue3.0+ts+element-plus

问题就像下面图片所展示，我们每次点击右侧语言切换的时候，都会触发表单的rules，我们没有动表单，还是会出现验证信息.
1、vue3.0里面取消了this，我们在setUp里面是拿不到this的，那么我们以前的this.$ref就行不通了那我们先看看怎么实现vue3.0+ts怎么实现表单验证

首先还是ref\、rule、和model先绑定
在这里插入图片描述
其次我们需要将这三个分别在setup中定义出来
在这里插入图片描述
然后在将它们return出来
在这里插入图片描述
最后在看看提交的时候如何验证
在这里插入图片描述
到这里我们就实现了vue3.0+ts表单验证
接下来处理国际化的问题

2、因为我们要实现如果在验证的中途切换的语言的时候，error message也会跟着触发，所以我们将代码写到computed里面，
 const emailRule = computed(() => {
   
   
      const rule = {
   
   
        username: [
          {
   
   
            validator: (rule: object, value
最低0.47元/天 解锁文章
Vue3+TS 在线考勤系统-7_表单验证
weixin_44562304的博客
05-25 147
零基础从入门到进阶，系统掌握前端三大热门技术。零基础从入门到进阶，系统掌握前端三大热门技术。零基础从入门到进阶，系统掌握前端三大热门技术。零基础从入门到进阶，系统掌握前端三大热门技术。一键登录按钮的事件函数。表示在失去焦点时触发。请输入正确的邮箱格式。表示占用网格数的一半。表示占用网格数的一半。表示在失去焦点时触发。请输入正确的邮箱格式。表示占用网格数的一半。表示在失去焦点时触发。请输入正确的邮箱格式。表示占用网格数的一半。表示在失去焦点时触发。请输入正确的邮箱格式。
Vue3+TS 在线考勤系统-8_token 持久化存储
weixin_44562304的博客
05-25 181
零基础从入门到进阶，系统掌握前端三大热门技术。状态管理中的同步操作中的方法。在同步操作中使用类型限定。一键登录按钮的事件函数。表示占用网格数的一半。表示在失去焦点时触发。请输入正确的邮箱格式。对外接口使用泛型限定。
vue3-ElementPlus-ts之表单运用（含表格规则校验）
CuiCui_web的博客
07-08 2909
vue3中运用elementPlus的表单，多规则校验
vue3+ts+vant4 统一管理表单校验规则
奔跑吧代码
03-29 3125
vue3+ts+vant4 统一管理表单校验规则
vue 3 国际化配置i18n ，简单的单文件和多文件处理。
随手记
09-04 2173
vue 3+ts+vite 国际化配置i18n
解决element ui切换语言时,表单验证自动触发
weixin_44373861的博客
07-01 1583
项目国际化处理。一切换中英文，表单的验证就自动触发，一片红，影响观感。像这样： 可以在watch中监听语言变化 watch:{ //处理切换语言时，表单验证全部自动触发 "$i18n.locale": function () { this.$nextTick(() => { this.$refs.form.clearValidate() //form是你自己表单的ref属性值
elementui ＜el-form :rules=“rules“＞ rules触发的方式，在提交的时候触发。并自定义清除rule。
weixin_47372236的博客
07-05 5282
方法很简单，在定义rules的时候， 1.name: [{ required: true, message: ‘必须入力的项目’, trigger: ‘suiyidingyi’ }], trigger对应的值，随意写。 2. 在提交按钮里面加上验证，业务逻辑写在if里面。this.findRefs(‘form’).validate(async (valid: any) => { if (valid) {}); 3.在标签上添加@change="onClickCheckValidat
基于vue3+ts配置化form表单组件实现浅析
junner443的博客
06-20 7085
基于vue3+ts配置化form表单组件实现浅析，同时兼容element-plus和ant-design-vue
Vue3+Elementplus表单验证 单个验证 统一验证 自定验证
zhaozuoyou的博客
11-09 853
Vue3+Elementplus表单验证 单个验证 统一验证 自定验证
vue3+ts,form表单校验实现步骤记录，与asyncValidator自定义验证规则
weixin_46689373的博客
01-11 3755
vue3+ts,form表单校验实现步骤记录，与asyncValidator自定义验证规则
Vue3+TS的表单验证逻辑分离
m0_52321138的博客
03-30 558
抽离常用逻辑之表单验证
【动态表单】vue动态表单第二次打开没点提交就开始校验了
qq_38411225的博客
01-17 1208
vue动态表单第二次打开没点提交就开始校验了新项目基于vue加ruoyi做动态表单踩坑 新项目基于vue加ruoyi做动态表单踩坑 1 . 动态渲染的组件在el-dialog里面抱着用true或false去控制是否弹出， 在正常组件表单写法，可以在点击事件就打开这个遮罩层。但是因为是动态表单里面表单渲染要先调取一次接口后动态渲染。刚开始也是直接在点击事件打开弹出框但是出现两个问题，一个是同一个表单第二次打开不管写了没写都会触发校验，满屏红框。还有就是如果里面有一个select下拉框第一次打开的表单会造成打
vue+element+ts。 提交校验多个表单
m0_52263688的博客
08-30 1176
vue+element，提交校验多个表单 点击按钮进行表单提交，同时校验 多个表单. （运用的ts开发）代码如下： //表单一 <el-form class="form-box" ref="ruleForm" :rules="rules" :model="data" label-position="top" label-width="180px" :inli
【Element Ui】 vue3中修改el-form的rules后不触发自动校验,再次修改rules时清除验证信息
alikami的博客
03-05 5686
修改el-form的rules后不触发自动校验,再次修改rules时清除验证信息
vue3+ts表单自定义校验规则
weixin_57534872的博客
06-22 696
使用vue3的elementplus的表单自定义校验
vue3+ts时定义全局属性，this.＜属性名＞报错
xuerwang的博客
06-07 738
vue3+ts时定义全局属性，this.报错
vue 一进页面单选框就触发验证问题
yf18040578780的博客
04-17 1849
vue 一进页面单选框就触发验证问题
【vue3 setup composition Api 的 Ts 类型声明使用 & 讲解】
从今年开始写写博客~~
04-04 3577
本文包含API的TS内容： ref、reactive、customRef、provide、inject、computed、watch、defineExpose、defineProps、defineEmits、withDefaults .... 涵盖了主要的组合式 API 的 TS类型。 核心：大部分都是运用API函数泛型来定义类型。
vue3+ts校验不通过问题
weixin_45274554的博客
08-18 542
vue3+ts校验不通过问题
vue3+ts使用vxe-table设置edit-rules
最新发布
07-30
<think>根据用户的问题，用户希望在Vue3和TypeScript环境下使用vxe-table配置编辑规则。vxe-table是一个功能强大的表格组件，支持编辑和校验功能。编辑规则（edit rules）用于在表格编辑时对输入进行校验。 参考用户提供的引用，特别是引用[3]中关于表单校验的示例，我们可以类似地配置vxe-table的编辑规则。vxe-table的编辑规则配置方式与Element UI的表单校验类似，可以使用自定义校验函数。 步骤： 1. 定义编辑规则：在vxe-table的列定义中，通过`editRules`属性配置校验规则。 2. 校验规则可以是内置的规则（如required, pattern等），也可以是自定义校验函数。 3. 自定义校验函数需要返回一个布尔值或一个带有message属性的对象（用于错误提示）。 由于用户使用TypeScript，我们需要为规则定义类型。 下面是一个示例代码，展示如何在Vue3和TypeScript中配置vxe-table的编辑规则：</think>在 Vue3 与 TypeScript 环境下配置 vxe-table 的编辑规则，主要通过 `editRules` 属性实现校验规则定义。以下是具体实现方法： ### 1. 基本规则配置 在列定义中使用 `editRules` 属性，支持内置校验规则： ```vue <template> <vxe-table :data="tableData"> <vxe-column field="name" title="姓名" :edit-render="{ autofocus: &#39;.vxe-input--inner&#39; }"> <template #edit="{ row }"> <vxe-input v-model="row.name"></vxe-input> </template> <template #default="{ row }">{{ row.name }}</template> </vxe-column> <vxe-column field="age" title="年龄" :edit-rules="ageRules" // 关键配置 :edit-render="{ autofocus: &#39;.vxe-input--inner&#39; }"> <template #edit="{ row }"> <vxe-input v-model="row.age" type="number"></vxe-input> </template> </vxe-column> </vxe-table> </template> <script lang="ts"> import { defineComponent, ref } from &#39;vue&#39; export default defineComponent({ setup() { const ageRules = ref([ { required: true, message: &#39;年龄不能为空&#39; }, { type: &#39;number&#39;, min: 18, max: 60, message: &#39;年龄范围 18-60 岁&#39; } ]) return { ageRules } } }) </script> ``` ### 2. 自定义校验函数 (TypeScript) 结合 TypeScript 类型定义实现复杂校验： ```typescript import { defineComponent, ref } from &#39;vue&#39; import { VxeTablePropTypes } from &#39;vxe-table&#39; // 定义行数据类型 interface TableRow { id: number name: string email: string } export default defineComponent({ setup() { // 自定义邮箱校验函数 const validateEmail = (value: string) => { const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ return regex.test(value) ? true : { message: &#39;邮箱格式不正确&#39; } } // 编辑规则配置（带TS类型） const emailRules = ref<VxeTablePropTypes.EditRule[]>([ { required: true, message: &#39;邮箱不能为空&#39; }, { validator: validateEmail } // 使用自定义校验 ]) return { emailRules } } }) ``` ### 3. 完整组件示例 ```vue <template> <vxe-table :data="tableData" :edit-config="{ trigger: &#39;click&#39;, mode: &#39;cell&#39; }"> <vxe-column type="seq" width="60"></vxe-column> <vxe-column field="email" title="邮箱" :edit-render="{ autofocus: &#39;.vxe-input--inner&#39; }" :edit-rules="emailRules"> <!-- 绑定规则 --> <template #edit="{ row }"> <vxe-input v-model="row.email"></vxe-input> </template> </vxe-column> <vxe-column title="操作"> <template #default="{ row }"> <vxe-button @click="saveRow(row)">保存</vxe-button> </template> </vxe-column> </vxe-table> </template> <script lang="ts"> import { defineComponent, ref } from &#39;vue&#39; import { VxeTablePropTypes } from &#39;vxe-table&#39; interface UserData { id: number email: string } export default defineComponent({ setup() { const tableData = ref<UserData[]>([ { id: 1, email: &#39;test@example.com&#39; } ]) // 自定义校验函数 const validateEmail = ({ cellValue }: any) => { const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ return regex.test(cellValue) ? true : { message: &#39;邮箱格式不正确&#39; } } // 编辑规则 const emailRules = ref<VxeTablePropTypes.EditRule[]>([ { required: true, message: &#39;邮箱不能为空&#39; }, { validator: validateEmail } ]) // 保存时触发校验 const saveRow = (row: UserData) => { // 实际项目中调用表格的校验方法 console.log(&#39;保存数据:&#39;, row) } return { tableData, emailRules, saveRow } } }) </script> ``` ### 关键配置说明： 1. **editRules 属性**：在列定义中配置校验规则数组 2. **校验规则类型**： ```typescript type EditRule = { required?: boolean, // 必填校验 pattern?: RegExp, // 正则校验 min?: number, // 最小值 max?: number, // 最大值 type?: &#39;number&#39;|&#39;string&#39;, // 数据类型 validator?: (params: { cellValue: any, // 当前单元格值 rule: EditRule, // 当前规则 row: any, // 当前行数据 column: any // 当前列配置 }) => boolean | { message: string } // 自定义校验函数 } ``` 3. **校验触发方式**： - 通过 `edit-config` 的 `trigger` 设置触发时机（click/dblclick/manual） - 手动校验可通过 `validate()` API 调用 ### 注意事项： 1. 使用 `v-model` 绑定数据时需确保响应性 2. 复杂场景建议使用 `setup` 语法糖 + TypeScript 类型定义 3. 自定义校验函数需返回布尔值或包含 `message` 的对象 4. 手机号校验可参考正则：`/^1[3456789]\d{9}$/`[^3]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值