快捷導(dǎo)航

Vue表單驗(yàn)證?trigger:'blur'OR?trigger:'change'區(qū)別解析

更新時(shí)間：2023年09月29日 09:16:37 作者：路西法98

利用?elementUI?實(shí)現(xiàn)表單元素校驗(yàn)時(shí)，出現(xiàn)下拉框內(nèi)容選中后校驗(yàn)不消失的異常校驗(yàn)情形，這篇文章主要介紹了Vue表單驗(yàn)證?trigger:‘blur‘?OR?trigger:‘change‘?區(qū)別,需要的朋友可以參考下

一、前言

利用 elementUI 實(shí)現(xiàn)表單元素校驗(yàn)時(shí)，出現(xiàn)下拉框內(nèi)容選中后校驗(yàn)不消失的異常校驗(yàn)情形。

在這里插入圖片描述

通過(guò)去除校驗(yàn)規(guī)則中相應(yīng)元素的 trigger:'blur' 屬性，可解決以上問(wèn)題。

在這里插入圖片描述

至于表單校驗(yàn)時(shí)，校驗(yàn)元素 trigger 屬性值的選擇，需要繼續(xù)深究。若不設(shè)置 trigger 屬性，該屬性是否有默認(rèn)值？

二、表單驗(yàn)證時(shí)，trigger:‘blur’ OR trigger:‘change’ OR 不設(shè)置？

對(duì) el-input 輸入框的驗(yàn)證， trigger 的值選 blur ，即失去焦點(diǎn)時(shí)進(jìn)行驗(yàn)證。

下拉框（ el-select ）、日期選擇器（ el-date-picker ）、復(fù)選框（ el-checkbox ）、單選框（ el-radio ）驗(yàn)證時(shí)， trigger 的值選擇 change ，即當(dāng)值發(fā)生變化時(shí)就進(jìn)行驗(yàn)證。

2.1 下拉框驗(yàn)證

<el-form-item label="活動(dòng)區(qū)域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="請(qǐng)選擇活動(dòng)區(qū)域">
      <el-option label="區(qū)域一" value="shanghai"></el-option>
      <el-option label="區(qū)域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
rules: {
   region: [
     { required: true, message: '請(qǐng)選擇活動(dòng)區(qū)域', trigger: 'change' }
   ]
}

2.2 日期選擇器驗(yàn)證

<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: '請(qǐng)選擇日期', trigger: 'change' }
],

2.3 復(fù)選框驗(yàn)證

<el-form-item label="活動(dòng)性質(zhì)" prop="type">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox label="美食/餐廳線上活動(dòng)" name="type"></el-checkbox>
      <el-checkbox label="地推活動(dòng)" name="type"></el-checkbox>
      <el-checkbox label="線下主題活動(dòng)" name="type"></el-checkbox>
      <el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
</el-form-item>
type: [ { type: 'array', required: true, message: '請(qǐng)至少選擇一個(gè)活動(dòng)性質(zhì)', trigger: 'change' } ],

2.4 單選框驗(yàn)證

<el-form-item label="特殊資源" prop="resource">
    <el-radio-group v-model="ruleForm.resource">
      <el-radio label="線上品牌商贊助"></el-radio>
      <el-radio label="線下場(chǎng)地免費(fèi)"></el-radio>
    </el-radio-group>
  </el-form-item>
resource: [ { required: true, message: '請(qǐng)選擇活動(dòng)資源', trigger: 'change' } ],

到此這篇關(guān)于Vue表單驗(yàn)證 trigger:‘blur‘ OR trigger:‘change‘ 區(qū)別的文章就介紹到這了,更多相關(guān)vue表單驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: