Vue表单验证 trigger:'blur'OR trigger:'change'区别解析

 更新时间:2023年09月29日 09:16:37   作者:路西法98  
利用 elementUI 实现表单元素校验时,出现下拉框内容选中后校验不消失的异常校验情形,这篇文章主要介绍了Vue表单验证 trigger:‘blur‘ OR trigger:‘change‘ 区别,需要的朋友可以参考下

一、前言

利用 elementUI 实现表单元素校验时,出现下拉框内容选中后校验不消失的异常校验情形。

在这里插入图片描述

通过去除校验规则中相应元素的 trigger:'blur' 属性,可解决以上问题。

在这里插入图片描述

至于表单校验时,校验元素 trigger 属性值的选择,需要继续深究。若不设置 trigger 属性,该属性是否有默认值?

二、表单验证时,trigger:‘blur’ OR trigger:‘change’ OR 不设置?

el-input 输入框的验证, trigger 的值选 blur ,即失去焦点时进行验证。

下拉框( el-select )、日期选择器( el-date-picker )、复选框( el-checkbox )、单选框( el-radio )验证时, trigger 的值选择 change ,即当值发生变化时就进行验证。

2.1 下拉框验证

<el-form-item label="活动区域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
rules: {
   region: [
     { required: true, message: '请选择活动区域', trigger: 'change' }
   ]
}

2.2 日期选择器验证

<el-form-item prop="date1">
  <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
</el-form-item>
date1: [
  { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],

2.3 复选框验证

<el-form-item label="活动性质" prop="type">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
</el-form-item>
type: [ { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' } ],

2.4 单选框验证

<el-form-item label="特殊资源" prop="resource">
    <el-radio-group v-model="ruleForm.resource">
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>
resource: [ { required: true, message: '请选择活动资源', trigger: 'change' } ],

到此这篇关于Vue表单验证 trigger:‘blur‘ OR trigger:‘change‘ 区别的文章就介绍到这了,更多相关vue表单验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 在vue项目中使用element-ui的Upload上传组件的示例

    在vue项目中使用element-ui的Upload上传组件的示例

    本篇文章主要介绍了在vue项目中使用element-ui的Upload上传组件的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • Vue框架下引入ActiveX控件的问题解决

    Vue框架下引入ActiveX控件的问题解决

    这篇文章主要介绍了Vue框架下引入ActiveX控件的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • vue3使用vue3-print-nb实现区域打印功能

    vue3使用vue3-print-nb实现区域打印功能

    这篇文章主要给大家介绍了关于vue3使用vue3-print-nb实现区域打印功能的相关资料,在日常操作中,相信很多人在Vue怎么用插件实现打印功能问题上存在疑惑,需要的朋友可以参考下
    2023-07-07
  • vue中使用console.log打印的实现

    vue中使用console.log打印的实现

    这篇文章主要介绍了vue中使用console.log打印的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Ant Design Vue 走马灯实现单页多张图片轮播效果

    Ant Design Vue 走马灯实现单页多张图片轮播效果

    这篇文章主要介绍了Ant Design Vue 走马灯实现单页多张图片轮播,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • vue调试工具vue-devtools的安装全过程

    vue调试工具vue-devtools的安装全过程

    这篇文章主要介绍了vue调试工具vue-devtools的安装全过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • Vue中监视属性和计算属性区别解析

    Vue中监视属性和计算属性区别解析

    这篇文章主要介绍了Vue中监视属性和计算属性区别,通过本文学习大家知道computed与watch配置项问题,computed能完成的功能,watch都可以完成,本文通过实例代码给大家详细讲解,需要的朋友可以参考下
    2022-10-10
  • vue实现echarts饼图/柱状图点击事件实例

    vue实现echarts饼图/柱状图点击事件实例

    echarts原生提供了相应的API,只需要在配置好echarts之后绑定相应的事件即可,下面这篇文章主要给大家介绍了关于vue实现echarts饼图/柱状图点击事件的相关资料,需要的朋友可以参考下
    2023-06-06
  • vue表单自定义校验规则介绍

    vue表单自定义校验规则介绍

    今天小编就为大家分享一篇vue表单自定义校验规则介绍,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue实现数字动态翻牌器

    vue实现数字动态翻牌器

    这篇文章主要为大家详细介绍了vue实现数字动态翻牌器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04

最新评论