+ [二、表单验证时,trigger:'blur' OR trigger:'change' OR 不设置?](#triggerblur_OR_triggerchange_OR__11)
+ - [2.1 下拉框验证](#21__17)
- [2.2 日期选择器验证](#22__33)
- [2.3 复选框验证](#23__43)
- [2.4 单选框验证](#24__56)
+ [三、拓展阅读](#_69)
一、前言
利用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 单选框验证
总结
-
对于框架原理只能说个大概,真的深入某一部分具体的代码和实现方式就只能写出一个框架,许多细节注意不到。
-
算法方面还是很薄弱,好在面试官都很和蔼可亲,擅长发现人的美哈哈哈…(最好多刷一刷,不然影响你的工资和成功率???)
-
在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。
-
要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!
第一次跳槽十分忐忑不安,和没毕业的时候开始找工作是一样的感受,真的要相信自己,有条不紊的进行。如果有我能帮忙的地方欢迎随时找我,比如简历修改、内推、最起码,可以把烦心事说一说,人嘛都会有苦恼的~
祝大家都有美好的未来,拿下满意的 offer。