2024年前端最新Vue进阶（幺玖零）：表单验证 trigger ‘blur‘ OR trigger (1)，2024年最新2024最新Web前端面经分享

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• • 一、前言
    • 二、表单验证时，trigger:‘blur’ OR trigger:‘change’ OR 不设置？
    • • 2.1 下拉框验证
        • 2.2 日期选择器验证
        • 2.3 复选框验证
        • 2.4 单选框验证
    • 三、拓展阅读

---

一、前言

利用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 复选框验证

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

71ac0)**

[外链图片转存中…(img-LRLnEgis-1715597421269)]

[外链图片转存中…(img-r5t0Uboi-1715597421270)]