快捷導(dǎo)航

el-form表單實(shí)現(xiàn)校驗(yàn)的示例代碼

更新時(shí)間：2024年07月02日 08:50:48 作者：colorful_-_

本文主要介紹了el-form表單實(shí)現(xiàn)校驗(yàn)的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前端表單實(shí)現(xiàn)， rules 屬性傳入約定的驗(yàn)證規(guī)則，并將 form-Item 的 prop 屬性設(shè)置為需要驗(yàn)證的特殊鍵值即可。

 <el-form ref="ruleFormRef" :model="interviewForm" label-position="left" require-asterisk-position="right" :rules="rules" label-width="90px" style="max-width: 600px" status-icon size="middle">
	<el-form-item label="面試名稱" prop="interviewName">
    	<el-input v-model="interviewForm.interviewName" placeholder="請(qǐng)輸入" />
    </el-form-item>

     <el-form-item label="面試類型" prop="interviewType">
		<el-radio-group v-model="interviewForm.interviewType" >
     <el-radio-button :label="type" :value="type" v-for="type, index in interviewTypeList" />
         </el-radio-group>
     </el-form-item>
                   
    <div v-if="interviewForm.interviewType == '就業(yè)'">
         <el-form-item label="崗位名稱" prop="jobTitle">
             <el-input v-model="interviewForm.jobTitle" placeholder="請(qǐng)輸入" />
        </el-form-item>
		<el-form-item label="崗位描述" >
             <el-input v-model="interviewForm.jobDesc" type="textarea" />
        </el-form-item>
		<el-form-item label="工作年限" prop="jobYear">
             <el-input-number v-model="interviewForm.jobYear" :min="0" placeholder="請(qǐng)輸入" />
        </el-form-item>
    </div>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
 </el-form>

部分驗(yàn)證規(guī)則如下

  rules: {
  		interviewName: [
           { required: true, message: '請(qǐng)輸入面試名稱', trigger: 'blur' },
           { min: 1, max: 10, message: '長(zhǎng)度應(yīng)該在1到10個(gè)字符之間', trigger: 'blur' },
        ],
 		jobTitle: [
           { required: true, message: '請(qǐng)輸入崗位名稱', trigger: 'blur' },
           { min: 1, max: 10, message: '長(zhǎng)度應(yīng)該在1到10個(gè)字符之間', trigger: 'blur' },
        ],
	}

點(diǎn)擊提交時(shí)驗(yàn)證表單數(shù)據(jù)

   submitForm() {
   #this.$refs 是 Vue 提供的一個(gè)對(duì)象，包含所有使用 ref 屬性注冊(cè)的子組件或 DOM 元素。
   #ruleFormRef 是在 el-form 組件上設(shè)置的 ref 名稱，因此 this.$refs.ruleFormRef 引用了這個(gè) el-form 組件實(shí)例。
   #validate 是 el-form 組件實(shí)例上的一個(gè)方法，用于觸發(fā)表單的驗(yàn)證。它會(huì)根據(jù) rules 屬性中定義的驗(yàn)證規(guī)則來驗(yàn)證表單的每一個(gè)字段。
      this.$refs.ruleFormRef.validate((valid) => {
        if (valid) {
          alert('表單驗(yàn)證成功!');
        } else {
          console.log('表單驗(yàn)證失敗!');
          return false;
        }
      });
    }

到此這篇關(guān)于el-form表單實(shí)現(xiàn)校驗(yàn)的示例代碼的文章就介紹到這了,更多相關(guān)el-form表單校驗(yàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: