element ui中el-form-item的属性rules的用法

目录

el-form-item的属性rules的用法

栗子 

总结 

实践应用

一、 定义静态的校验规则

二、定义动态的校验规则


el-form-item的属性rules的用法

在学习element ui 的Form表单组件时,学到el-form-item也有rules属性,但是对应这个属性如何使用,却一直用不对,百度查资料也没查到,

通过自己多方面测试,终于了解到了el-form-item也有rules属性的用法,现在总结分享给大家!

栗子 

表单域的验证规则:

        1.只有一条时,el-from-item 的属性rules绑定的变量的值为一个对象,对象中规定验证规则

        2.有多条时,el-from-item 的属性rules绑定的变量的值为一个对象数组,数组中的每一个对象元素都对应一条验证规则


总结 

在使用Element UI的el-form组件进行表单验证时,如果同时在el-form上绑定了rules,并且在单独的el-form-item上也绑定了rules,那么Element UI会将两者的规则合并使用。具体来说,对于同一个字段,如果el-formel-form-item都有对应的验证规则,那么el-form-item上的规则会覆盖el-form上的规则。

这里是如何工作的:

  1. el-form的rules:这是表单级别的验证规则,适用于表单内所有字段。如果表单中的某个字段没有在el-formrules中明确指定规则,那么它将不会进行验证。

  2. el-form-item的rules:这是字段级别的验证规则,只适用于绑定到该el-form-item的特定字段。如果字段在el-formrules中也有规则,el-form-item中的规则将会覆盖表单级别的规则。

例如,如果有一个表单字段username,你在el-form上定义了一个规则,要求用户名至少为5个字符,然后在对应的el-form-item上定义了一个规则,要求用户名必须以"admin"开头,那么最终username字段的验证规则将是必须以"admin"开头。

// el-form的rules
{rules: {username: [{ required: true, message: '用户名是必填项', trigger: 'blur' },{ min: 5, message: '用户名至少为5个字符', trigger: 'blur' }]}
}// el-form-item的rules
<el-form-item prop="username"><el-input v-model="form.username"></el-input><template slot="rules">[{ validator: customValidator, trigger: 'blur' }]</template>
</el-form-item>

 

在这个例子中,customValidator是一个自定义的验证函数,它将检查用户名是否以"admin"开头。这个规则将覆盖el-form中对username字段的最小字符长度要求。

需要注意的是,合并规则时,el-form-item上的规则会优先应用,但是el-form上的规则仍然可以为其他没有在el-form-item上定义规则的字段提供验证。

实践应用

一、 定义静态的校验规则

  1. 如template
<el-form 
ref="condFormRef" 
id="condForm" 
:model="cond" 
label-width="100px" 
size="mini" 
:rules="condFormRules"
><!-- rules 内嵌在el-form-item -->
<el-form-item label="名称:" prop="name" :rules="{required: true, message: '请输入名称', trigger:'blur'}"><el-inputv-model="cond.name"></el-input></el-form-item><el-form-item label="预算:" prop="budget"><el-inputstyle="width:60%"v-model="cond.budget"maxlength="15"clearable></el-input><small>&nbsp;元</small></el-form-item>
</el-form>
  1. 在form 上定义上绑定 rules 属性, 给需要校验的item 增加prop 属性, prop 值需要个rules中的keys 保持一致
condFormRules:{budget:[//带prop的{required: true, message: '', trigger: ['blur','change']},{validator: validateBudget, trigger: 'blur'},],
}

 说明:
(1) required: 是否必填, true则显示红星星, 当设置了必填时, 必须有message, 哪怕为空,否则不填时给默认提示"budget is required"

注意: 如{message: 'aaaaaaaa', trigger: ["blur","change"]},  没有required,则会校验,但上次校验失败的信息不会自动消失, 即要有message时, 必须有required
  

(2) trigger: 可选["blur","change"]触发执行校验的事件 blur:失去焦点时, change:数据改变时

     this.$refs.condFormRef.validate() 时,trigger都会执行

(3) validator:自定义校验属性,可以定义自己的校验规则,如validateBudget自定义的规则函数, 校验逻辑复杂时可以自定义函数实现。
如下校验逻辑复杂的:要求数字且正整数或最多带两位的小数

var validateBudget=(rule, value, callback) => {if(!value || !Number(value)){ //不输入或输0.0或0.00时,都进入callback(new Error('请输入预算'));}else if(!(/(^[1-9]\d*(\.\d{1,2})?)$/.test(value) || /(^[0](\.\d{1,2}){1})$/.test(value))){callback(new Error('请输入正整数或最多带两位的小数'));}else{callback();}};

 校验输入数字简单时,可以直接写在模板中, 如限制输入数字

<el-inputstyle="width:60%"v-model="cond.budget"maxlength="15"@input="cond.budget = cond.budget.replace(/[^\d]/g, '')" //非数字的全局替换成空clearable></el-input>

二、定义动态的校验规则


当我们的表单项是动态生成的, 又需要对其进行输入值的校验, 怎么做呢?????
比如添加一个用户信息,让其输入并校验

<el-col :span="6"><el-button @click="addInfo">添加学生信息</el-button><el-form ref="testForm" :model="testModel" label-width="100px"> <div style="border: 1px solid #000000"v-for="(info, index) of testModel.studentsInfos":key="'info_'+index"><el-form-itemlabel="名字":prop="'studentsInfos.' + index + '.name'":rules="{required: true, message: '请输入名称', trigger:'blur'}"><el-input v-model="info.name"></el-input></el-form-item><el-form-itemlabel="年龄":prop="'studentsInfos.' + index + '.age'":rules="validateAge"><el-input v-model="info.age"></el-input></el-form-item><el-form-itemlabel="性别":prop="'studentsInfos.' + index + '.sex'":rules="{required: true, message: '请选择性别', trigger:'change'}"><el-select v-model="info.sex"><el-option label="男" value="man"></el-option><el-option label="女" value="women"></el-option></el-select></el-form-item></div>        <el-form-item label=""><el-button @click="testSave">保存</el-button></el-form-item></el-form></el-col>

效果图如下

data() {return {testModel:{studentsInfos: []},validateAge: [{required: true, message: "请输入您的年龄", trigger: ['blur', 'change']},{validator: (rule, value, callback)=>{if(value&& !(/^\d+$/g).test(value)){callback(new Error("请输入数字"))}callback()}}]
}

 

methods: {addInfo(){this.testModel.studentsInfos.push({name: "", age: "", sex: ""})},testSave(){this.$refs['testForm'].validate((valid)=>{if(valid){console.log("校验通过, 可以保存了")}else{console.log("校验失败")}})},
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/47011.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Databend 开源周报第 153 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend。 支持必须更改密码…

Adobe Photoshop 2024 25.9.1 Win/Mac PS2024最新中文学习版

Adobe Photoshop 2024&#xff0c;简称PS&#xff0c;目前最强的图片处理合成软件,PS提供了广泛的工具和功能&#xff0c;包括画笔、铅笔、颜色替换、混合器画笔等绘画工具&#xff0c;以及裁剪、透视变形、智能修复画笔等编辑工具。用户可以使用这些工具进行图片编辑、合成、校…

旅游数据可视化:免费工具让复杂数据变得简单易懂

随着旅游业的蓬勃发展&#xff0c;海量的数据如同繁星点点&#xff0c;记录着每一位旅者的足迹与偏好。然而&#xff0c;如何将这些复杂的数据转化为直观、易懂的信息&#xff0c;为旅游企业精准决策、为消费者提供更加个性化的服务&#xff0c;成为了行业内外共同关注的焦点。…

vue2+antd实现表格合并;excel效果

效果图 一、html <template><div><a-table :columns"columns" :dataSource"dataSource" rowKey"id" :pagination"false" bordered><template slot"content1" slot-scope"text">{{text}}…

JuiceFS缓存特性

缓存 对于一个由对象存储和数据库组合驱动的文件系统&#xff0c;缓存是本地客户端与远端服务之间高效交互的重要纽带。读写的数据可以提前或者异步载入缓存&#xff0c;再由客户端在后台与远端服务交互执行异步上传或预取数据。相比直接与远端服务交互&#xff0c;采用缓存技…

图片如何去水印,PS 图片去水印的几种常见方法

在数字图像的世界里&#xff0c;水印常常被用来标识版权或防止未经授权的使用&#xff0c;但有时它们却成为了美观的障碍。无论是出于个人偏好还是专业需求&#xff0c;去除图片上的水印已经成为一项常见的任务。 Adobe Photoshop 作为行业标准的图像编辑软件&#xff0c;提供…

热门软件缺陷管理工具2024:专业评测与建议

国内外主流的10款软件缺陷管理工具软件对比&#xff1a;PingCode、Worktile、禅道、Tapd、Teambition、Tower、JIRA、Bugzilla、MantisBT、Trac。 在软件开发过程中&#xff0c;管理缺陷和漏洞常常成为一项挑战&#xff0c;尤其是在项目规模庞大时。选择一个高效的软件缺陷管理…

C语言------指针讲解(2)

目录 一、数组名的理解 二、使用指针访问数组 三、一维数组传参的本质 四、冒泡排序 五、二级指针 六、指针数组 七、指针数组模拟二维数组 一、数组名的理解 通过学习&#xff0c;我们知道&#xff1a;数组名和数组首元素的地址打印出来的结果一模一样&#xff0c;数组…

深度刨析程序中的指针

前面我们已经学习过了指针的一下性质&#xff1a; 指针就是个变量&#xff0c;用来存放地址&#xff0c;地址唯一标识的一块内存空间指针的大小是固定的4/8个字节&#xff08;32位平台/64位平台&#xff09;指针是有类型&#xff0c;指针的类型决定了指针的加减整数的步长&…

SQL 中的 EXISTS 子句:探究其用途与应用

目录 EXISTS 子句简介语法 EXISTS 与 NOT EXISTSEXISTS 子句的工作原理实际应用场景场景一&#xff1a;筛选存在关联数据的记录场景二&#xff1a;优化查询性能 EXISTS 与其他 SQL 结构的比较EXISTS vs. JOINEXISTS vs. IN 多重 EXISTS 条件在 UPDATE 语句中使用 EXISTS常见问题…

Maven学习—如何在IDEA中配置Maven?又如何创建Maven工程?(详细攻略)

目录 前言 1.在IDEA中配置Maven 2.创建Maven项目 &#xff08;1&#xff09;Maven&#xff1a;创建普通Maven工程 &#xff08;2&#xff09;Maven Archetype&#xff1a;创建Maven模板工程 前言 本篇博客将详细的介绍在IDEA中如何配置Maven&#xff0c;以及如何创建一个Ma…

分布式 I/O 系统 BL200 Modbus TCP 耦合器

BL200 耦合器是一个数据采集和控制系统&#xff0c;基于强大的 32 位微处理器设计&#xff0c;采用 Linux 操作系统&#xff0c;支持 Modbus 协议&#xff0c;可以快速接入现场 PLC、SCADA 以及 ERP 系统&#xff0c; 内置逻辑控制、边缘计算应用&#xff0c;适用于 IIoT 和工业…

园区道路车辆智能管控视频解决方案,打造安全畅通的园区交通环境

一、背景需求分析 随着企业园区的快速发展和扩张&#xff0c;道路车辆管理成为了保障园区秩序、提升运营效率及确保员工安全的重要任务。针对这一需求&#xff0c;旭帆科技TSINGSEE青犀提出了一种企业园区道路车辆管控的解决方案&#xff0c;通过整合视频监控、智能识别等技术…

Qt6 OpenCV4视频监控系统项目源码解析——附源码及编译运行步骤

很多刚毕业&#xff0c;或者想着转行到C Qt方向的小伙伴&#xff0c;平时可能拿不出比较像样的项目。这里你可要好好收藏啦。自己拿回去好好改改&#xff0c;就可以成为自己的项目经历了。祝各位找工作顺利呀。 好了。废话不多说。 这个项目架构采用的是MVC架构&#xff0c;结…

Porfinet从转DeviceNet从总线协议转换网关

产品功能 1. 远创智控YC-DNT-PN型是Porfinet从转Devicenet从工业级Porfinet 网关。‌这种网关设备允许将Porfinet网络中的设备连接到Devicenet网络中&#xff0c;‌从而实现不同工业通信协议之间的互操作性。‌这些网关设备通常具有两个以太网接口&#xff0c;‌分别用于连接Po…

STM32智能楼宇照明系统教程

目录 引言环境准备智能楼宇照明系统基础代码实现&#xff1a;实现智能楼宇照明系统 4.1 数据采集模块 4.2 数据处理与控制模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景&#xff1a;楼宇照明管理与优化问题解决方案与优化收尾与总结 1. 引言 智能楼宇照明系…

【verilog语法】$clog2(IEEE Std 1364-2005)

一、前言 在进行Verilog设计时&#xff0c;有时需要根据内存大小来计算地址的位宽&#xff0c;或者根据变量的值来确定变量的位宽&#xff0c;这时可以自己编写相关的可综合函数&#xff0c;或者verilog-2005起开始支持的$clog2系统函数。 二、自己编写的function function i…

代码规范性

代码规范性 命名规范代码格式注释代码结构异常处理代码复用代码审查空格的用法代码示例 命名规范 ​ 1、变量和函数名&#xff1a;使用驼峰命名法&#xff08;camelCase&#xff09;&#xff0c;如userName、getUserInfo。 ​ 2、常量&#xff1a;使用全大写字母&#xff0c;…

VSCode安装以及安装你需要的插件的保姆级教程

文章目录 前言vscode的简介安装vscode下载安装包 安装中文插件安装C/C插件总结 前言 Visual Studio Code&#xff08;VSCode&#xff09;是一款免费、开源且强大的代码编辑器&#xff0c;它具有易于使用的界面和丰富的功能&#xff0c;包括高级代码编辑、导航、调试等功能。VS…

远程访问及控制(ssh)

目录 一、OpenSSH服务器 1.1 SSH&#xff08;Secure Shell&#xff09;协议 1.2 OpenSSH 2.1 SSH原理 2.1 1 公钥传输原理 2.1.2 加密原理 2.1.3 SSHD服务的两种验证方式 二、SSH命令中的基本操作 2.1 构建密钥对验证的SSH 2.1.1 公钥和密钥的关系 2.1.2 构建密钥对…