element plus表单自定义校验规则和验证单个字段

已于 2022-05-13 21:17:31 修改
阅读量5.1k 收藏 10
点赞数 3
分类专栏： ts vue3 element plus 文章标签： typescript vue.js javascript
于 2022-05-13 21:16:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48960335/article/details/124759781
版权

关键代码

在这里插入图片描述

// prop 设置校验规则
<el-form ref="registerFormRef" :model="registerForm" status-icon :rules="registerRules" label-width="70px">

	<el-form-item label="手机号" prop="tel">
	
	    <el-input v-model="registerForm.tel" autocomplete="off" placeholder="请输入手机号" />
	    
	    <el-link type="danger" @click="sendCode" :disabled="hasBeenSend">{
   {
    sendCodeText }}</el-link>
	    
	<
最低0.47元/天 解锁文章
温情key
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ElementPlus表单rules校验
weixin_43786099的博客
06-29 1万+
element中Form表单验证有两种方式，一种是写在data中，另外一种是直接在表单中标签里面添加即可。
vue表单自定义校验规则介绍
10-18
Vue提供了多种方式来处理表单验证，其中自定义校验规则是一个灵活且强大的功能，允许开发者根据具体需求定制验证逻辑。在本篇文章中，我们将深入探讨如何在Vue中实现表单的自定义校验规则。 首先，让我们看一个简单...
vue element自定义表单验证请求后端接口验证
12-30
做vue项目的时候遇到了一个需求，在验证某个表单项时不仅需要是必填项而且要去通过接口校验是否有重复值。 template 引入接口 import { checkUseridRepeat } from '@/api/user' 校验 data: () => { var validateUserid = (rule, value, callback) => { if (v
vue-element-plus-admin中的表单，验证非必填项以及多个必填项
weixin_45346457的博客
05-08 666
【代码】vue-element-plus-admin中的表单，验证非必填项以及多个必填项。
Vue3 Element Plus表单自定义校验实现步骤
最新发布
qq_41737571的博客
05-20 428
【代码】Vue3 Element Plus表单自定义校验实现步骤。
elementUI中validateField对多个部分表单字段进行校验时多次回调问题的完美解决方案
CHENC0518的博客
04-22 7086
在网上看到了他人的解决方案，发现他们的方案是不对的，他们只是单单解决了验证错误，却没有解决验证正确的情况下。 1.首先，我们得知道，使用validateField部分校验数组的时候，数组有几位，就会回调几次。当也就是空的时候，表示验证通过，回调返回为“ ”，所以就是，你校验几个规则，就会返回几个结果，如果通过就为“”（空）。 2.我们只需要定义一个数组 const validateFieldList= [] 3.每当校验，就像数组中push该message值 validateFieldLis
element plus form表单自定义校验规则
m0_65051174的博客
05-15 1065
value是我们input中输入的值。
vue3+element-plus validate校验
Florenza的博客
01-11 4372
预期效果:点击确定 校验输入框内容 由于文档上写的比较模糊 经尝试结果代码应为 <template> <el-form :ref="formdata" :model="form"> <el-radio-group v-model="form.isCache"> <el-radio label="0"> 缓存 ...
vue3.0使用element-plus表单登录提交报错validate
总结前端开发中遇到的问题，分享前端知识
02-21 3914
注意事项： ref="ruleFormFef"和model="ruleForm"不能重复使用 获取全局getCurrentInstance方法，注意路由和store 线上使用有问题，在这里获取表单ref没有问题。 完整写法： ​​​​​ ​​​​​​​​​​​​​​ ...
关于ElementPlus中的表单验证
这是我的笔记本，记录学习历程，分享学习经验，菜鸡一枚，感谢支持！
06-06 4916
在中的规则中，数组中的每一个对象都是一个校验规则，我们只需要给一个对象给出方法的实现即可:// rule此条规则的描述信息 // value表单中此字段的值 // 回调函数,通过此函数控制是否校验通过 }看个例子// 定义校验规则 const rules = reactive({// 普通的校验规则 account : [ {required : true , message : '账户不能为空' , trigger : 'blur' } , {
Vue3+Element-Plus 实现添加用户表单中自定义验证规则的功能 三七
build2024
01-07 9839
1.使用自定义验证规则场景：当表单中，需要对个别输入项进行自定义验证规则时，例如，手机号、邮箱验证 2. 如何自定义校验规则 2.1 例：手机号需要自定义校验规则。首先，在Data 数据区定义一个手机号的自定义校验规则的变量，该变量是一个箭头函数。这个变量就称做用户的自定义校验规则。 该箭头函数包含三个形参 第一个参数表示校验规则 第二个参数表示需要验证的值 第三个参数是一个callback 回调函数，当验证通过时，需要在箭头函数中调用callback 回调函数，表示当前验证通过。否则，.
vue element table中自定义一些input的验证操作
10-15
这里的`rules`对象中，`name`和`volume1`分别对应了`bookname`和`bookvolume`字段的验证规则。`required`表示该字段是否必填，`message`定义了验证失败时的提示信息，`trigger`指定了触发验证的事件，如`blur`表示...
ant-design表单处理和常用方法及自定义验证操作
01-22
首先要说一下antdesign这个框架API和demo丰富，而且开发环境提供对应的warning来纠正用户的错误。是一个很好的组件库。 关于表单验证方面是依赖于 async-validator 库。百度的san-xui组件库的表单验证也是依赖与...
element plus自定义组件表单校验
weixin_36878452的博客
01-14 1002
【代码】element plus自定义组件表单校验。
ts封装常见的表单校验，适用于element-plus
qq_27936291的博客
07-15 1416
Ts封装element-plus常见的表单验证，外加使用方法
element-plus表单验证使用 个人总结
热门推荐
ymzhao
10-18 4万+
表单验证能通过设置验证规则验证用户的输入，并对不规范的输入做出对应提示。element-plus（包括element-ui）都提供了表单验证功能。但官网上只有最基本的使用方法，详细使用需要参考async-validator，element-plus表单验证就是通过它实现的..............................
vue3-ElementPlus-ts之表单运用（含表格规则校验）
CuiCui_web的博客
07-08 2116
vue3中运用elementPlus的表单，多规则校验
element多个表单，对单个表单进行验证
wqnmlgbsz的博客
06-11 340
this.$refs[formName].validateField('mobile', valid => { console.log(valid) if(!valid) { if (!this.timer) { this.count = TIME_COUNT this.show = false this.timer = setInterval(() =...
element plus 表单验证的字段名解释以及使用方法
分享互联网的有趣知识~
09-06 475
element plus 表单验证的字段名解释以及使用方法。
Element Plus 获得表单验证单个字段的验证是否通过
05-27
您可以使用 Element Plus 中的表单验证方法 `this.$refs.form.validateField()` 来验证单个字段是否通过验证。您可以将需要验证的字段的 `prop` 属性作为参数传递给该方法，例如： ```html <el-form ref="form" :model="formData" :rules="rules"> <el-form-item label="用户名" prop="username"> <el-input v-model="formData.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="formData.password" type="password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="handleSubmit">提交</el-button> </el-form-item> </el-form> ``` ```javascript export default { data() { return { formData: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' } ] } } }, methods: { handleSubmit() { this.$refs.form.validate((valid) => { if (valid) { // 表单验证通过，提交表单 console.log('表单验证通过'); } else { // 表单验证失败 console.log('表单验证失败'); } }); }, handleCheckUsername() { // 验证用户名字段是否通过验证 this.$refs.form.validateField('username', (valid) => { if (valid) { console.log('用户名验证通过'); } else { console.log('用户名验证失败'); } }); } } } ``` 在上面的示例代码中，`handleSubmit` 方法会在提交表单时对整个表单进行验证，而 `handleCheckUsername` 方法则会验证用户名字段是否通过验证。在调用 `validateField` 方法时，可以传递一个回调函数，该回调函数会在验证结果返回后被调用，可以根据验证结果来执行相应的操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

温情key

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值