Vue表单验证 trigger:'blur'OR trigger:'change'区别解析
作者：路西法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表单验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！