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，即当值发生变化时就进行验证。

下拉框验证

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
 

日期选择器验证

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

复选框验证

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

单选框验证

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

拓展阅读

• 《Vue进阶（幺伍柒）：表单重置this.$refs[name].resetFields()；失效》

• 《Vue进阶（幺贰幺）：表单校验注意事项》

• 《Vue进阶（幺叁柒）：表单校验》

• 《Vue进阶（三十）：vue中使用element-ui进行表单验证》

• 《Vue进阶（幺幺叁）：关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题》

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/115859916