快捷導(dǎo)航

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

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

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

一、前言

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

在這里插入圖片描述

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

在這里插入圖片描述

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

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

對 el-input 輸入框的驗證， trigger 的值選 blur ，即失去焦點時進行驗證。

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

2.1 下拉框驗證

<el-form-item label="活動區(qū)域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="請選擇活動區(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ū)域', 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 復(fù)選框驗證

<el-form-item label="活動性質(zhì)" 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: '請至少選擇一個活動性質(zhì)', 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' } ],

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

您可能感興趣的文章: