关于element-ui表单自定义验证

最新推荐文章于 2024-05-02 23:27:37 发布
最新推荐文章于 2024-05-02 23:27:37 发布
阅读量1.6k 收藏 4
点赞数 1
分类专栏： 网页基本功能 文章标签： 1024程序员节 html5 css3 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67318211/article/details/127499198
版权

在我们项目中，经常会有表单之类。需要输入的字段很多时候都需要做验证，但是框架自带的验证往往达不到我们的要求，所以我们会用到自定义的验证。
如图是一个账号密码的添加表单在这里插入图片描述
当我们要求输入的账号输入框不能为空，只能为数字，且4到10位，那我们该怎么去做呢？

1.首先就是创建表单，创建rules规则

在这里插入图片描述

2.自定义的规则

在data里面，通过rules，对acc账号设置验证规则。这里是通过validator设置一个验证函数（名字随便取），我们在验证函数里写对应的验证规则
在这里插入图片描述

3.定义验证函数

在这里插入图片描述
这里只是提供自定义验证的简单思路，还有很多的验证方法值得去学习，一起加油！

前端仔牛俊生
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue自定义组件使用Element-ui表单校验
qq_42731434的博客
07-17 2403
一般情况下(form中的组件都是element提供的组件)在使用elm的表单校验时我们是这么使用的：// 栗子.vue <template> <el-form :model="formData" :rule="rules" ref="formRef"> <el-form-item prop="inputValue"> <el-input v-model="formData.inputValue"></el-
element-ui表单自定义校验
weixin_44548001的博客
09-07 7356
项目开发过程中，遇到表单校验，这次的校验规则比较严，element-ui表单自带的校验完全解决不了问题。使用elementui表单校验中的自定义校验，划红线的代码是自定义校验的方法名称。注意：方法中一定义要返回callback()，不然表单校验时是不会成功的。下面是定义校验的地方：validUsername是自定义的校验方法名称。4.清除表单校验结果。
element-UI框架使用validate.js的form校验规则（+自定义验证代码）- 应用篇
草巾冒小子的博客
03-13 1万+
element-UI除了官方给出的校验规则，还可以自定义（举例如下） （官方说明）引入：Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator 具体使用： 以上就是关于“ element-UI表单组件：校验规则（自定义验证代码）- 应用篇 ” 的...
element-ui自定义表单校验规则及常用表单校验(1)
最新发布
2401_84411249的博客
05-02 401
validate是ElementUI封装用于对整个表单进行验证的，参数是一个回调函数。该回调函数在校验结束后被调用，是否校验成功和未通过校验的字段。这个回调函数的原型为：function fun(rule, value, callback, source, options){}，其中rule指向当前的规则对象，value是需要进行校验的值，callback是验证之后的执行回调，source是跟value的值一致的键值对象（可以忽略），options是个额外的配置选项（可选）。
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
朝阳39的博客
11-21 1305
在表单中，可能部分表单项需封装成自定义组件，如何在表单提交时，能同步触发自定义组件的表单校验？
element-ui的form表单校验
minnyYu的博客
12-31 4546
element-ui表单校验步骤
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，主要关注的是动态表单验证以及表单元素的增删操作。下面我们将详细探讨这些知识点。 1. Vue.js动态表单验证： Vue.js允许开发者通过...
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
此外，还可以自定义验证规则，通过在`rules`对象中定义一个函数，该函数接收输入值作为参数，并返回一个包含错误消息的对象或`null`。 总结起来，使用Element-UI和Vue.js解决表格内表单验证问题，需要理解`el-form`...
详解element-ui中form验证杂记
10-17
然而，在Element-UI中，我们通常通过`rules`对象来定义自定义验证规则。如果同时在HTML和`rules`中都设置了`required`，可能会引发冲突，导致不必要的错误提示。例如： ```html <el-form-item label="角色名称" ...
vue中使用element-ui进行表单验证的实例代码
08-27
Vue 中使用 Element-UI 进行表单验证的实例代码 Vue 中使用 Element-UI 进行表单验证是许多开发者所面临的挑战，本文将详细介绍如何使用 Element-UI 进行表单验证，并提供了实例代码供参考。 一、简单逻辑验证...
Element-UI使用手册1
08-03
这是一个关于Element-UI的基础使用手册，Element-UI是一个基于Vue.js的开源UI组件库，用于快速构建现代化的Web应用程序。手册主要分为几个部分，包括开发指南、基本组件和表单组件。 1. **开发指南**： - **安装**...
Element UI 表单【详解】-- 表单校验
热门推荐
coldriversnow的专栏
07-18 1万+
callback(new Error('必须年满18岁'));rules: {// 是否必填 没有这个就没有前面红点// 自定义验证规则// 触发事件},
表单项formItem中使用自定义组件校验rules
weixin_42971933的博客
02-03 1875
elementUI以及antdv表单项formItem中使用自定义组件校验rules，达到自己触发校验规则的目的
element ui框架（第一个element ui程序）
嵌入式-老费，一个分享专业嵌入式知识的blog
09-17 685
【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】 有了之前的nodejs和vue作为铺垫之后，后面就可以准备导入element ui库了。我们还是以一个demo的形式来完整说明，应该如何导入element ui库。 1、创建test-elementui工程 用管理员的账号打开cmd窗口，输入vue init ./webpack test-elementui。不出意外的话，就可以看到创建好的test-eleme
【Vue实用功能】elementUI 自定义表单模板组件
weixin_44590591的博客
12-20 4248
elementUI 实现一个自定义的表单模板组件 【Vue实用功能】elementUI 自定义表单模板组件 背景：在项目开发中，我们会遇到这种需求，在管理后台添加自定义表单，在指定的页面使用定义好的表单 直接上代码：
vue+elementUI实现自定义表单模板组件（一）
weixin_43930421的博客
05-30 4177
前言 如下图，实现一个可以自定义的表单。本文以实现思路为主，并未提供完整代码。 思路 1、页面布局为左中右布局：左边显示可以定义的表单控件，中间显示预览效果，右边则为选中某个控件后可以编辑的属性。如下图，先择单选项后，可以编辑选项。 2、使用 vuedraggable 拖拽组件，直接拖动左边的控件到中间生成表单。vuedraggable 文档可查阅： https://github.com/SortableJS/Vue.Draggable （你也可以不使用该组件，直接利用点击事件，点击左边控件后在中间生成
element-ui自定义非必填字段的格式校验
关注最新技术问题并持续维护更新
12-14 2959
场景     element 表单里非必填的字段需要校验格式时使用 注意     rules 里面非必填字段不要加上 required 属性 <template> <div class="container"> <el-form ref="elForm" :inline="true" :model="form" :rules="rules" size="small"> <el-form-item label="姓名" prop="name"&
element表单非必填自定义校验规则
m0_52313178的博客
07-31 4680
element表单非必填自定义校验规则使用场景必填校验规则与自定义校验规则重写自定义函数解决bug 使用场景 众所周知element自带了一些校验规则，比如说校验一些值的类型我们可以改变input的type属性来达到我们想要效果，如何是必填，我们rules中加入required为true就好，如果你的表单中的值不是必填项，但只要有值就要校验值的格式呢？格式的规则element本身没有，所以我们要自定义校验规则。两个问题，自定义校验规则怎么写？非必填怎么做？ 必填校验规则与自定义校验规则 首先我们看必填
elementUI 非表单格式的校验
qq_35946021的博客
07-13 1587
关键代码 clearValidate 方法清除校验。在普通表单中对输入框、选择框都有校验案例。但是在自定义非空中如何进行校验官网并没有说明。
element-ui多选表单验证
10-10
针对 element-ui 多选表单验证，可以使用自定义的校验规则，示例代码如下： ```javascript <el-form-item prop="selectList" label="多选列表"> <el-select v-model="selectList" multiple placeholder="请选择"> <el-option label="选项1" value="1"></el-option> <el-option label="选项2" value="2"></el-option> <el-option label="选项3" value="3"></el-option> </el-select> <el-form-item v-for="(item, index) in selectList" :key="index"> <template #label></template> <template #default> <span>{{ item }}</span> </template> </el-form-item> <template #error> <span style="color: red;">请选择至少一项</span> </template> </el-form-item> <script> export default { data() { return { selectList: [] } }, methods: { // 自定义校验规则 validateSelectList(rule, value, callback) { if (value.length === 0) { callback(new Error('请选择至少一项')) } else { callback() } }, // 提交表单 submitForm() { this.$refs.form.validate(valid => { if (valid) { console.log('表单验证通过') } else { console.log('表单验证失败') } }) } }, mounted() { this.$refs.form.validateSelectList = this.validateSelectList } } </script> ``` 在上述代码中，我们通过 `prop` 属性指定了表单项对应的数据字段，然后在 `validateSelectList` 方法中编写了自定义的校验规则，该方法会被当作表单项对应的校验函数来调用。 然后我们在 `mounted` 钩子函数中将 `validateSelectList` 方法绑定到表单对象上，这样表单项就可以通过 `rules` 属性引用到这个校验函数了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值