vue3-表单校验

最新推荐文章于 2023-12-29 09:00:00 发布
最新推荐文章于 2023-12-29 09:00:00 发布
阅读量455 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZZZZZZZZjy/article/details/131992323
版权

制定规则-通过rules绑定规则

// 提供校验规则

const mobileRules: FieldRule[] = [

  { required: true, message: '请输入手机号码' },

  { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确' }

]

export { mobileRules}

表单里 :rules="mobileRules"

 表单的原生提交

 

 表单整体校验

 

赵不困888（合作私信）
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3——实现表单校验
m0_57712926的博客
10-02 1万+
目录前言一、表单校验的意义二、如何对表单进行校验？1. 准备2. 步骤3. 使用三、结果演示总结 前言 为什么要进行表单校验呢？不进行表单校验会有什么危害？如何进行表单校验呢？带着这些问题，今天一起来看一下vue3中如何实现表单校验吧~ 一、表单校验的意义 当用户在输入框内输入的值或者必选项未进行选择时，就不触发下一步的操作 可以让用户的信息都按一定的规则来设置，方便统一管理 通过表单校验可以有效地规避不法分子进行危险输入 二、如何对表单进行校验？ 这里使用一个专门做表单校验的第三方包，文档：vee
Vue3表单验证 单个验证 统一验证 自定验证
weixin_44728473的博客
06-28 7891
Vue3表单验证 单个验证 统一验证 自定验证
【Vue3】通用表单校验的两种方式
冷芝士鸭的学习笔记
03-17 9708
还有一种就是点击按钮时进行整个表单的校验，比如登录时，检查表单所有输入内容是否合法。当不合法时，显示Toast提示信息。// 校验函数返回 true 表示校验通过，false 表示不通过。中定义该对象，给按钮添加。中无参数默认校验整个表单。通过自定义验证器校验。
vue3-form-validation：Vue 3中的DIY表单验证
02-11
vue3-form-validation 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
vue3中表单校验
weixin_59017683的博客
05-12 2024
前端表单校验，vue表单校验，输入框特殊符号处理
vue3表单校验
m0_62873187的博客
04-20 384
password: [{ required: true, message: '请输入密码', trigger: ["blur",'change'] }]name: [{ required: true, message: '请输入用户名', trigger: ["blur",'change'] }],console.log('校验结果', valid)placeholder="用户名"placeholder="密码">登录</el-button。
vue3-form-validation:用于表单验证的Vue撰写功能
04-03
Vue 3的表单验证 用于表单验证的Vue合成功能。 :milky_way: 用TypeScript编写 :water_wave: 动态表格支持 :fallen_leaf: 轻的 npm install vue3-form-validation 验证是异步的，并且正在使用Promise.allSettled 。 :backhand_index_pointing_right: 在上查看示例用法。 原料药 该包导出一个函数useValidation ，以及使用TypeScript时的一些类型定义。 const { form , errors , submitting , validateFields , resetFields , add , remove } = useValidation < T> ( formData ) ; useValidation采用以下参数： formData 类型- object 描述-表单数据的结构。 表单数据对象的结构类似于您将为
element-ui vue 表单校验
12-21
element-ui vue 表单校验
Vue element-ui父组件控制子组件的表单校验操作
10-15
主要介绍了Vue element-ui父组件控制子组件的表单校验操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue表单自定义校验规则介绍
10-18
今天小编就为大家分享一篇vue表单自定义校验规则介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3.0实现点击切换验证码(组件)及校验
01-22
本文实例为大家分享了vue3.0实现点击切换验证码(组件)及校验的具体代码，供大家参考，具体内容如下 先看效果 父组件 点击更换
vue3表单验证
kanno的博客
02-12 522
vue3+ts+el表单验证
vue3 setup() js 表单校验
jiangliuhuan123的博客
07-25 1122
vue3 setup() js 表单校验
vue3之表单验证
attach_uzi的博客
09-23 4934
3相信很多小伙伴都玩起来了，表单验证是很正常不过的事情，话不多说，直接贴代码, <el-form :model="editForm" ref="editFormRef" :rules="rules"> <el-form-item label="姓名:" prop="name" :required="true"> <el-input v-model="editForm.name" placeholder="请输入姓名" /> </el-form
Vue3---登录表单验证
weixin_52053631的博客
07-10 1875
1. 简单的表单校验：比如用户名和密码。2. 自定义校验：比如同意协议的勾选框。3. 统一校验：比如登录按钮。
详解Vue3中的表单验证
一起学习
12-29 1734
本文主要介绍Vue3中的表单验证。
vue3-form表单校验
baekpcyyy的博客
12-07 1349
vue3-form表单校验。
Vue3实现登录表单验证
前端小攻城狮的博客
06-14 6881
使用async-validator实现表单验证
Vue3中表单相关的知识：表单绑定、表单验证、表单处理
网络技术联盟站
07-18 926
setup() {return {password,
vue3a-moadl表单校验
最新发布
01-27
以下是使用 Element Plus 中的 el-form 进行表单校验的示例代码： ```vue <template> <el-form :model="form" :rules="rules" ref="form" label-width="80px"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="resetForm">重置</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '用户名长度在 3 到 10 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' } ] } }; }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 表单校验通过，提交表单 // TODO: 提交表单的逻辑 } else { // 表单校验不通过，提示错误信息 return false; } }); }, resetForm() { this.$refs.form.resetFields(); } } }; </script> ``` 在上述代码中，我们使用了 el-form 组件来构建表单，并通过 :model 绑定了表单数据对象 form。同时，我们使用 :rules 属性来定义表单的校验规则。在 el-form-item 中，我们使用了 v-model 来绑定表单元素的值，prop 属性指定了对应的校验规则。 在 submitForm 方法中，我们调用了 this.$refs.form.validate 方法来进行表单校验。如果校验通过，可以在 if (valid) 的逻辑中进行表单提交的操作。如果校验不通过，可以在 else 的逻辑中进行错误提示。 需要注意的是，上述代码是基于 Vue 3 和 Element Plus 的示例，如果你使用的是其他版本的 Vue 或其他 UI 框架，可能会有些许差异。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值