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

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

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

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

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

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

栗子

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

1.只有一條時，el-from-item 的屬性rules綁定的變量的值為一個對象，對象中規(guī)定驗證規(guī)則

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

總結(jié)

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

這里是如何工作的：

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

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

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

// el-form的rules
{
  rules: {
    username: [
      { required: true, message: '用戶名是必填項', trigger: 'blur' },
      { min: 5, message: '用戶名至少為5個字符', 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>

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

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

實踐應(yīng)用

一、定義靜態(tài)的校驗規(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="名稱：" prop="name" :rules="{required: true, message: '請輸入名稱', 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 屬性，給需要校驗的item 增加prop 屬性， prop 值需要個rules中的keys 保持一致

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

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

注意：如{message: 'aaaaaaaa', trigger: ［"blur","change"］}, 沒有required，則會校驗，但上次校驗失敗的信息不會自動消失，即要有message時，必須有required

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

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

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

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

校驗輸入數(shù)字簡單時，可以直接寫在模板中, 如限制輸入數(shù)字

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

二、定義動態(tài)的校驗規(guī)則

當(dāng)我們的表單項是動態(tài)生成的，又需要對其進(jì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: '請輸入名稱', 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: '請選擇性別', 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: "請輸入您的年齡", trigger: ['blur', 'change']},
      {validator: (rule, value, callback)=>{
        if(value&& !(/^\d+$/g).test(value)){
          callback(new Error("請輸入數(shù)字"))
        }
        callback()
        }
      }
      ]
}

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

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

您可能感興趣的文章: