vue2表单校验：添加自定义el-form表单校验规则

已于 2025-01-03 10:08:23 修改
阅读量1.6k 收藏 11
点赞数 9
CC 4.0 BY-SA版权
分类专栏： Vue 文章标签： vue.js javascript 前端
于 2024-08-27 20:15:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/l_q_l/article/details/141277046
Vue 专栏收录该内容
59 篇文章 ¥19.90 ¥99.00
订阅专栏

前言

在vue2表单校验：el-form表单绑定数组并使用rules进行校验_vue2 rules校验-优快云博客中，使用form原生的rules对表单中每个控件的必填、格式等做了校验。但是保存时，除了验证每一个控件的输入合乎要求外，还需要验证控件之间的数据合规性，针对这个案例，就是其中的人员是否重复（本文代码接上文）。

需求

  1. 需要用户填写一系列人员，不设上限，但是至少填写一个。
  2. 每个人员信息包含人员名称和电话号码
  3. 希望页面“人员”前面添加必填项标识
  4. 希望检查人员姓名和手机号码是否填写，格式是否符合规范，并给出合理提示
  5. 所添加的人员不能重复，即姓名和手机号不能都相同。

解决方

了解本专栏 订阅专栏 解锁全文
vue2表单校验：el-form表单绑定数组并使用rules进行校验
l_q_l的专栏
08-17 5189
1、在el-form中指定rule，可引用data或compute中集中定义的rules，也可以每一条item中单独定义自己的rule2、另外，花费1天的时间买来的教训：如果rules集中写，在el-form中已经引用了，那么在el-form-item中不能重复引用，否则console中不会报错，但是，rules将不起作用，且提示 people is not a string，即便在rules中添加了 type: 'array' 也不行。如下写法是错误的。​。
表单验证 ---- 在Vue2中使用ElementUI进行表单验证
weixin_68854196的博客
01-15 2042
在vue2中使用elementui表单的验证
vue2 表格加表单混用，实现表单校验
qq_44230631的博客
01-10 411
vue2,表格加表单混用，表格验证，数据绑定
【ElementUI 表单校验】一个 el-form-item 下多个表单校验（循环校验）
前端知识分享喵
06-07 4488
前端开发项目的过程中，批量表单循环校验是很常见的，如上图，动态添加奖励计算规则，把所有的表单放到了一个 el-form-item 下。也可以理解为 el-form-item 做了嵌套，外层当然也可以省略，样式做微调，下面通过代码来详细的看一下。不足之处，多多交流。
JS 与Element 进行表单手机号码和邮箱的验证
最新发布
qq_44846654的博客
05-04 273
账号可以是手机号码或邮箱地址，且不为空。当验证逻辑比较复杂时，可以用js编写自定义的rule，在与表单的rules属性进行绑定// js部分// 账号可以输入手机号码或邮箱地址if (!value) {return callback(new Error('请输入手机号或邮箱'))if (!callback(new Error('请输入正确的手机号或邮箱格式'))} else {callback()}, 100)// 自定义rulesrules: {account: [
vue2 + el-form表单的动态自定义的校验
qq_45599738的博客
01-29 2428
vue2 + el-form 表单的动态自定义校验处理
【vue2】使用elementUI进行表单验证实操
YQCC1的博客
12-09 4269
UI与Vant组件库的导入、注册、使用方法。
Vue2黑马人力资源项目1（表单校验）
weixin_63298649的博客
04-30 376
绑定之后设置检验isAgree: [// 这里需要使用自定义验证validator// 不用required是因为它只能检测 null undefined ""// rule校验规则// value校验的值// callback函数-promise resolve reject// calback() callback(new Error('需要勾选'))value?callback() : callback(new Error('需要勾选'))
vue表单自定义校验规则介绍
10-18
首先，让我们看一个简单的Vue表单示例： ```html <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="pass"> <el-...
vue针对动态生成的表单el-form进行提交校验
liao3399084的博客
06-08 662
2、前端将得到的各个空闲人员的薪酬方式、出勤类型等进行填写。需要对所有空闲人员的考勤信息进行管理。4、当每个对象校验通过时，予以提交保存。1、后台得到所有的空闲人员名单数组。3、对指定填写内容进行必填项校验。
【vue2】使用elementUI进行表单验证实操（附源码）
嗨，朋友你好！我是前端领域的工作者
03-20 8891
vue2使用elementUI完成表单验证。
vue2后台管理项目表单校验的规则
2301_79267034的博客
11-09 509
2、参考文档element ui form表单 ，在el-form-item 必须要写上prop="name" ， 在el-input必须写上 v-model="ruleForm.name" ，ruleForm是在el-form中写的model属性。如：登录模块中的需要输入账号、密码登，因此我们要输入正确的账号密码格式等就叫 ----表单校验。model属性：整个表单数据 rules属性：定义校验规则对象。输入账号、密码和勾选复选框时，但是没有按着写的校验规则。
vue2.X+elementUI表单自定义验证
CoderVic的博客
04-01 1491
vue2.X+elementUI表单自定义验证
vue2使用form表单自定义验证规则
m0_70947033的博客
09-07 610
在项目中要求只保留小数点后两位。
vue中实现表单校验
kuke_kuke的博客
01-02 3391
前提条件：vue-cli创建一个项目，安装async-validator（npm i async-validator -S） 在components中新建FormTest.vue组件，并在App.vue中引入。 一个form表单需要form、formItem、input，初步代码如下： formTest: <template> <div> for...
vue2 + elementui 表单自定义校验
陈景夏
07-14 504
vue2 + elementui 表单自定义校验 文件上传校验
后台管理系统vue2.0项目实战（一）——项目前置知识复习（element ui表单验证和Promise复习）
weixin_56370772的博客
11-25 1221
自定义校验规则怎么用validator是一个函数, 其中有三个参数 (rule(当前规则),value(当前值),callback(回调函数))// 根据value进行进行校验// 如果一切ok// 直接执行callbackcallback() // 一切ok 请继续// 如果不okcallback(new Error("错误信息"))根据以上要求，增加手机号第三位必须是9的校验规则// 自定义校验规则，例：增加手机号第三位必须是数字 9 的校验规则callback()
vue2以及vue3基于el-table实现表格正则校验功能
weixin_53339757的博客
08-01 1254
vue2以及vue3基于el-table实现表格正则校验功能
vue2 动态循环展示el-form-item时，rules 和 prop如何使用
a895544608的博客
11-01 1147
/ 获取最新的 item.intervalTime。// 获取最新的 item.intervalTime。// 获取最新的 item.grade。// 获取最新的 item.num。callback(new Error('请输入'));trigger: ['blur', 'change', 'input'], // 设定触发方式。后台返回[{},{},{}..] 10个对象，用 identify 作为唯一标识。// 始终添加校验规则。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值