Vue进阶(幺玖零):表单验证时,trigger:‘blur‘ OR trigger:‘change‘

举报
SHQ5785 发表于 2021/04/22 08:47:35 2021/04/22
【摘要】 前言利用elementUI实现表单元素校验时,出现下拉框内容选中后校验不消失的异常校验情形。通过去除校验规则中相应元素的trigger:'blur'属性,可解决以上问题。至于表单校验时,校验元素trigger属性值的选择,需要继续深究。若不设置trigger属性,该属性是否有默认值? 表单验证时,trigger:‘blur’ OR trigger:‘change’ OR 不设置?对el-i...

前言

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

日期选择器验证

<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' } ],
【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200