Vue中rules的写法使用小结

更新时间：2024年01月28日 12:16:32 作者：Sun Peng

这篇文章主要介绍了Vue中rules的写法使用小结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

1、使用方法一：

template里使用=>

:rules="rules"  //注意:rules不能改 ;
后面的rules要与data=>return里rules名称相同,根据自己情况写 ;
里面的prop也不能少;
:model="ruleForm"也不能少;

data=>return里：

required:*，显示输入框为选填或必填项。
message:提示信息；
trigger:触发事件  =>  blur(用于input等)和chang(用于select,picker等)用的比较多

2、使用方法二：

<el-form-item label="货品价格(元):" :rules="{required:true,message:'此项必填',trigger:blur}">
      <el-input v-model="dataList.price" :disabled="showType == 'detail'" clearable />
</el-form-item>

下面这种不推荐使用:

<el-form-item label="货品价格(元):" required>
      <el-input v-model="dataList.price" :disabled="showType == 'detail'" clearable />
</el-form-item>

3.提交时,事件（方法）显示验证(必需)：

this.$refs.refForm(这里el-form是ref的内容,根据自己情况写).validate((valid)=>{//缺少的话,验证不起作用
        if(vaild){
                //验证成功...
        } 
})

4.遇到的不同情况:

【1】Vue实现EleementUI中列表的选填与必填（动态绑定，自定义提示信息）(一个下拉框的内容决定另一个下拉框是否为必填项)

【2】Vue实现列表Table提示信息Validate重置（全部与单个）：

【3】 Element - The world's most popular Vue UI framework(自定义校验规则)

到此这篇关于Vue中rules的写法使用小结的文章就介绍到这了,更多相关Vue中rules写法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue数字输入框组件示例代码详解
很多朋友经常遇到这样的功能，只允许输入数字，允许设置初始值、最大值、最小值，今天小编给大家分享示例代码给大家介绍vue数字输入框功能，感兴趣的朋友一起看看吧
2020-01-01
vue中i18n的安装与几种使用方式详解
在一些网站经常可以看到切换语言包,将网站转化成多种语言版本的情况,下面这篇文章主要给大家介绍了关于vue中i18n的安装与几种使用方式的相关资料,需要的朋友可以参考下
2022-09-09
Windows系统下使用nginx部署vue2项目的全过程
nginx是一个高性能的HTTP和反向代理服务器,因此常用来做静态资源服务器和后端的反向代理服务器,下面这篇文章主要给大家介绍了关于Windows系统下使用nginx部署vue2项目的相关资料,需要的朋友可以参考下
2023-03-03
教你用Cordova打包Vue项目的方法
这篇文章主要介绍了教你用Cordova打包Vue项目的方法，详细的介绍了如何Vue项目打包成app，具有一定的参考价值，有兴趣的可以了解一下
2017-10-10
vue时间戳和时间的相互转换方式
本文通过示例代码介绍了vue时间戳和时间的相互转换方式,通过场景分析介绍了vue3使用组合式api将时间戳格式转换成时间格式（2023年09月28日 10:00）,感兴趣的朋友一起看看吧
2023-12-12
vue 实现Web端的定位功能获取经纬度
这篇文章主要介绍了vue 实现Web端的定位功能获取经纬度，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-08-08
vue3调度器effect的scheduler功能实现详解
这篇文章主要为大家介绍了vue3调度器effect的scheduler功能实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
Vue中的侦听器及使用场景
Vue中的侦听器是一种响应式机制，可以对指定的数据进行监听，并在数据变化时执行相应的回调函数。常用于监听复杂数据类型的变化，如对象和数组。通过侦听器，可以实现数据的自动更新和逻辑处理等功能，提高代码的可读性和可维护性
2023-05-05
前端实现pdf预览功能的全过程(基于vue)
这篇文章主要给大家介绍了关于前端实现pdf预览功能的相关资料,前端实现预览最好的效果还是PDF,不会出现一些文字错乱和乱码的问题,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-09-09
Vue2.x中的父子组件相互通信的实现方法
这篇文章主要介绍了Vue2.x中的父子组件相互通信,需要的朋友可以参考下
2017-05-05