Vue进阶（幺玖零）：表单验证时，trigger:‘blur‘ OR trigger:‘change‘

末蓝、 2023-01-13 14:55 349阅读 0赞

## 前言 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70_pic_center]  
通过去除校验规则中相应元素的`trigger:'blur'`属性，可解决以上问题。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70_pic_center 1]  
**至于表单校验时，校验元素`trigger`属性值的选择，需要继续深究。若不设置`trigger`属性，该属性是否有默认值？**

## 表单验证时，trigger:‘blur’ OR trigger:‘change’ OR 不设置？ ##

*  对`el-input`输入框的验证，`trigger`的值选`blur`，即**失去焦点**时进行验证。
 *  下拉框（`el-select`）、日期选择器（`el-date-picker`）、复选框（`el-checkbox`）、单选框（`el-radio`）验证时，`trigger`的值选择`change`，即当**值发生变化**时就进行验证。

### 下拉框验证 ###

<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' }
       ]
    }

### 日期选择器验证 ###

<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' }
    ],

### 复选框验证 ###

<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' } ],

### 单选框验证 ###

<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进阶（幺伍柒）：表单重置this.$refs\[name\].resetFields()；失效][Vue_this._refs_name_.resetFields]》
 *  《[Vue进阶（幺贰幺）：表单校验注意事项][Vue]》
 *  《[Vue进阶（幺叁柒）：表单校验][Vue 1]》
 *  《[Vue进阶（三十）：vue中使用element-ui进行表单验证][Vue_vue_element-ui]》
 *  《[Vue进阶（幺幺叁）：关于vue.js element ui 表单验证 this.$refs\[formName\].validate()的问题][Vue_vue.js element ui _ this._refs_formName_.validate]》

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/d6a077c3ea2f4dddac3b26d5652605ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/51725796674a4e5597d3b93061c796a5.png
[Vue_this._refs_name_.resetFields]: https://shq5785.blog.csdn.net/article/details/112471284
[Vue]: https://shq5785.blog.csdn.net/article/details/106431017
[Vue 1]: https://shq5785.blog.csdn.net/article/details/109056366
[Vue_vue_element-ui]: https://blog.csdn.net/sunhuaqiang1/article/details/85235441
[Vue_vue.js element ui _ this._refs_formName_.validate]: https://blog.csdn.net/sunhuaqiang1/article/details/105666113