vue:表單驗證時,trigger的值什么時候選blur什么時候選change


對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' } ],

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM