快捷導(dǎo)航

element?ui中el-form-item的屬性rules的用法示例小結(jié)

更新時(shí)間：2024年07月21日 13:40:38 作者：前端?賈公子

這篇文章主要介紹了element?ui中el-form-item的屬性rules的用法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧

el-form-item的屬性rules的用法

在學(xué)習(xí)element ui 的Form表單組件時(shí)，學(xué)到el-form-item也有rules屬性，但是對(duì)應(yīng)這個(gè)屬性如何使用，卻一直用不對(duì)，百度查資料也沒(méi)查到，

通過(guò)自己多方面測(cè)試，終于了解到了el-form-item也有rules屬性的用法，現(xiàn)在總結(jié)分享給大家！

栗子

表單域的驗(yàn)證規(guī)則：

1.只有一條時(shí)，el-from-item 的屬性rules綁定的變量的值為一個(gè)對(duì)象，對(duì)象中規(guī)定驗(yàn)證規(guī)則

2.有多條時(shí)，el-from-item 的屬性rules綁定的變量的值為一個(gè)對(duì)象數(shù)組，數(shù)組中的每一個(gè)對(duì)象元素都對(duì)應(yīng)一條驗(yàn)證規(guī)則

總結(jié)

在使用Element UI的el-form組件進(jìn)行表單驗(yàn)證時(shí)，如果同時(shí)在el-form上綁定了rules，并且在單獨(dú)的el-form-item上也綁定了rules，那么Element UI會(huì)將兩者的規(guī)則合并使用。具體來(lái)說(shuō)，對(duì)于同一個(gè)字段，如果el-form和el-form-item都有對(duì)應(yīng)的驗(yàn)證規(guī)則，那么el-form-item上的規(guī)則會(huì)覆蓋el-form上的規(guī)則。

這里是如何工作的：

el-form的rules：這是表單級(jí)別的驗(yàn)證規(guī)則，適用于表單內(nèi)所有字段。如果表單中的某個(gè)字段沒(méi)有在el-form的rules中明確指定規(guī)則，那么它將不會(huì)進(jìn)行驗(yàn)證。

el-form-item的rules：這是字段級(jí)別的驗(yàn)證規(guī)則，只適用于綁定到該el-form-item的特定字段。如果字段在el-form的rules中也有規(guī)則，el-form-item中的規(guī)則將會(huì)覆蓋表單級(jí)別的規(guī)則。

例如，如果有一個(gè)表單字段username，你在el-form上定義了一個(gè)規(guī)則，要求用戶(hù)名至少為5個(gè)字符，然后在對(duì)應(yīng)的el-form-item上定義了一個(gè)規(guī)則，要求用戶(hù)名必須以"admin"開(kāi)頭，那么最終username字段的驗(yàn)證規(guī)則將是必須以"admin"開(kāi)頭。

// el-form的rules
{
  rules: {
    username: [
      { required: true, message: '用戶(hù)名是必填項(xiàng)', trigger: 'blur' },
      { min: 5, message: '用戶(hù)名至少為5個(gè)字符', trigger: 'blur' }
    ]
  }
}
// el-form-item的rules
<el-form-item prop="username">
  <el-input v-model="form.username"></el-input>
  <template slot="rules">
    [
      { validator: customValidator, trigger: 'blur' }
    ]
  </template>
</el-form-item>

在這個(gè)例子中，customValidator是一個(gè)自定義的驗(yàn)證函數(shù)，它將檢查用戶(hù)名是否以"admin"開(kāi)頭。這個(gè)規(guī)則將覆蓋el-form中對(duì)username字段的最小字符長(zhǎng)度要求。

需要注意的是，合并規(guī)則時(shí)，el-form-item上的規(guī)則會(huì)優(yōu)先應(yīng)用，但是el-form上的規(guī)則仍然可以為其他沒(méi)有在el-form-item上定義規(guī)則的字段提供驗(yàn)證。

實(shí)踐應(yīng)用

一、定義靜態(tài)的校驗(yàn)規(guī)則

如template

<el-form 
ref="condFormRef" 
id="condForm" 
:model="cond" 
label-width="100px" 
size="mini" 
:rules="condFormRules"
>
<!-- rules 內(nèi)嵌在el-form-item -->
<el-form-item label="名稱(chēng)：" prop="name" :rules="{required: true, message: '請(qǐng)輸入名稱(chēng)', trigger:'blur'}">
    <el-input
    v-model="cond.name">
    </el-input>
  </el-form-item>
 <el-form-item label="預(yù)算：" prop="budget">
    <el-input
    style="width:60%"
    v-model="cond.budget"
    maxlength="15"
    clearable>
    </el-input>
    <small>&nbsp;元</small>
  </el-form-item>
</el-form>

在form 上定義上綁定 rules 屬性，給需要校驗(yàn)的item 增加prop 屬性， prop 值需要個(gè)rules中的keys 保持一致

condFormRules:{
  budget:[//帶prop的
    {required: true, message: '', trigger: ['blur','change']},
    {validator: validateBudget, trigger: 'blur'},
  ],
}

說(shuō)明：
(1) required：是否必填， true則顯示紅星星，當(dāng)設(shè)置了必填時(shí)，必須有message, 哪怕為空，否則不填時(shí)給默認(rèn)提示"budget is required"

注意：如{message: 'aaaaaaaa', trigger: ［"blur","change"］}, 沒(méi)有required，則會(huì)校驗(yàn)，但上次校驗(yàn)失敗的信息不會(huì)自動(dòng)消失，即要有message時(shí)，必須有required

(2) trigger: 可選［"blur","change"］觸發(fā)執(zhí)行校驗(yàn)的事件 blur：失去焦點(diǎn)時(shí)， change：數(shù)據(jù)改變時(shí)

     this.$refs.condFormRef.validate() 時(shí)，trigger都會(huì)執(zhí)行

(3) validator：自定義校驗(yàn)屬性，可以定義自己的校驗(yàn)規(guī)則，如validateBudget自定義的規(guī)則函數(shù), 校驗(yàn)邏輯復(fù)雜時(shí)可以自定義函數(shù)實(shí)現(xiàn)。
如下校驗(yàn)邏輯復(fù)雜的：要求數(shù)字且正整數(shù)或最多帶兩位的小數(shù)

var validateBudget=(rule, value, callback) => {
      if(!value || !Number(value)){ //不輸入或輸0.0或0.00時(shí)，都進(jìn)入
        callback(new Error('請(qǐng)輸入預(yù)算'));
      }
      else if(!(/(^[1-9]\d*(\.\d{1,2})?)$/.test(value) || /(^[0](\.\d{1,2}){1})$/.test(value))){
        callback(new Error('請(qǐng)輸入正整數(shù)或最多帶兩位的小數(shù)'));
      }
      else{
        callback();
      }
    };

校驗(yàn)輸入數(shù)字簡(jiǎn)單時(shí)，可以直接寫(xiě)在模板中, 如限制輸入數(shù)字

<el-input
  style="width:60%"
  v-model="cond.budget"
  maxlength="15"
  @input="cond.budget = cond.budget.replace(/[^\d]/g, '')" //非數(shù)字的全局替換成空
  clearable>
  </el-input>

二、定義動(dòng)態(tài)的校驗(yàn)規(guī)則

當(dāng)我們的表單項(xiàng)是動(dòng)態(tài)生成的，又需要對(duì)其進(jìn)行輸入值的校驗(yàn)，怎么做呢？？？？？
比如添加一個(gè)用戶(hù)信息，讓其輸入并校驗(yàn)

<el-col :span="6">
      <el-button @click="addInfo">添加學(xué)生信息</el-button>
      <el-form ref="testForm" :model="testModel" label-width="100px"> 
        <div 
        style="border: 1px solid #000000"
        v-for="(info, index) of testModel.studentsInfos"
        :key="'info_'+index"
        >
          <el-form-item
          label="名字"
          :prop="'studentsInfos.' + index + '.name'"
          :rules="{required: true, message: '請(qǐng)輸入名稱(chēng)', trigger:'blur'}"
          >
            <el-input v-model="info.name"></el-input>
          </el-form-item>
          <el-form-item
          label="年齡"
          :prop="'studentsInfos.' + index + '.age'"
          :rules="validateAge"
          >
            <el-input v-model="info.age"></el-input>
          </el-form-item>
          <el-form-item
          label="性別"
          :prop="'studentsInfos.' + index + '.sex'"
          :rules="{required: true, message: '請(qǐng)選擇性別', trigger:'change'}"
          >
            <el-select v-model="info.sex">
              <el-option label="男" value="man"></el-option>
              <el-option label="女" value="women"></el-option>
            </el-select>
          </el-form-item>
        </div>        
        <el-form-item label="">
            <el-button @click="testSave">保存</el-button>
        </el-form-item>
      </el-form>
    </el-col>

效果圖如下

data() {
    return {
      testModel:{studentsInfos: []
      },
      validateAge: [
      {required: true, message: "請(qǐng)輸入您的年齡", trigger: ['blur', 'change']},
      {validator: (rule, value, callback)=>{
        if(value&& !(/^\d+$/g).test(value)){
          callback(new Error("請(qǐng)輸入數(shù)字"))
        }
        callback()
        }
      }
      ]
}

methods: {
    addInfo(){
      this.testModel.studentsInfos.push({name: "", age: "", sex: ""})
    },
    testSave(){
      this.$refs['testForm'].validate((valid)=>{
        if(valid){
          console.log("校驗(yàn)通過(guò)， 可以保存了")
        }
        else{
          console.log("校驗(yàn)失敗")
        }
      })
    },
}

到此這篇關(guān)于element ui中el-form-item的屬性rules的用法的文章就介紹到這了,更多相關(guān)element ui中el-form-item的屬性rules的用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: