vue?el-input設(shè)置必填提示功能(單個(gè)與多個(gè))

更新時(shí)間：2023年02月18日 11:07:27 作者：怎么吃不飽捏

有的功能需要設(shè)置必填項(xiàng),當(dāng)然也需要判斷是不是添上了,下面這篇文章主要給大家介紹了關(guān)于vue?el-input設(shè)置必填提示功能(單個(gè)與多個(gè))的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

有兩種:一種是多個(gè)el-input通過(guò)同一個(gè)el-form表單來(lái)限制,這種用得最多的地方就是添加和修改功能;另一種是每個(gè)el-input通過(guò)各自的el-form表單來(lái)限制,這種通常是用在動(dòng)態(tài)添加多個(gè)輸入框等功能上，話不多說(shuō)，上才藝噻.

第一種（多個(gè)el-input同時(shí)限制）：

舉栗（element-ui官網(wǎng)的案例）：

HTML代碼:

<!-- 第一步對(duì)應(yīng) :model="ruleForm" ;第二步對(duì)應(yīng) :rules="rules" ;第三步對(duì)應(yīng) ref="ruleForm"-->
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <!-- 這里的 prop 也不可少,是與rules中定義的每個(gè)屬性的校驗(yàn)規(guī)則是一一對(duì)應(yīng)的-->
  <el-form-item label="活動(dòng)名稱" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="活動(dòng)區(qū)域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="請(qǐng)選擇活動(dòng)區(qū)域">
      <el-option label="區(qū)域一" value="shanghai"></el-option>
      <el-option label="區(qū)域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活動(dòng)時(shí)間" required>
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker type="date" placeholder="選擇日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker placeholder="選擇時(shí)間" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="即時(shí)配送" prop="delivery">
    <el-switch v-model="ruleForm.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活動(dòng)性質(zhì)" prop="type">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox label="美食/餐廳線上活動(dòng)" name="type"></el-checkbox>
      <el-checkbox label="地推活動(dòng)" name="type"></el-checkbox>
      <el-checkbox label="線下主題活動(dòng)" name="type"></el-checkbox>
      <el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊資源" prop="resource">
    <el-radio-group v-model="ruleForm.resource">
      <el-radio label="線上品牌商贊助"></el-radio>
      <el-radio label="線下場(chǎng)地免費(fèi)"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活動(dòng)形式" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即創(chuàng)建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>

JavaScript代碼:

<script>
  export default {
    data() {
      return {
        // 第一步,定義表單數(shù)據(jù)對(duì)象,并綁定
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        // 第二步,定義表單數(shù)據(jù)校驗(yàn)對(duì)象,并綁定
        rules: {
          name: [
            { required: true, message: '請(qǐng)輸入活動(dòng)名稱', trigger: 'blur' },
            { min: 3, max: 5, message: '長(zhǎng)度在 3 到 5 個(gè)字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '請(qǐng)選擇活動(dòng)區(qū)域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '請(qǐng)選擇日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '請(qǐng)選擇時(shí)間', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '請(qǐng)至少選擇一個(gè)活動(dòng)性質(zhì)', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '請(qǐng)選擇活動(dòng)資源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '請(qǐng)?zhí)顚懟顒?dòng)形式', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        // 第三步,點(diǎn)擊提交表單按鈕的時(shí)候判斷是否符合校驗(yàn)規(guī)則,符合才會(huì)往下運(yùn)行,不符合會(huì)
        // 按照你定義的校驗(yàn)規(guī)則提示警告
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

第二種(對(duì)單個(gè)el-input設(shè)置必填限制):

我是自己封裝的組件,暫時(shí)沒想到其他的方式,目前看來(lái)是能符合功能需求的。

1.定義組件input-required.vue

html代碼：

<template>
  <div>
    <el-form ref="formRef" :model="form" :rules="formRules" label-width="80px" style="font-size:0.6vw">
      <el-form-item :label="labelValue" :prop="this.propValue">
        <el-input
          v-model="value"
          :placeholder="`請(qǐng)輸入${labelValue}`"
          autocomplete="off"
          :disabled="isDisalbed"
          @change="isValid"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

javascript代碼：

<script>
export default {
  data() {
    return {
      value: "",
      form: {},
      formRules: {}
    };
  },
  // 子組件使用props來(lái)接收父組件內(nèi)傳過(guò)來(lái)的數(shù)據(jù)
  props: ["propValue", "labelValue", "isDisalbed", "indexValue"],
  created() {
   // 給子組件的對(duì)象動(dòng)態(tài)添加屬性并設(shè)置屬性值
    this.$set(this.form, this.propValue, "");
    this.$set(this.formRules, this.propValue, [
      { required: true, message: `${this.labelValue}不能為空`, trigger: "blur" }
    ]);
  },
  methods: {
    // el-input失去焦點(diǎn)后會(huì)校驗(yàn)數(shù)據(jù),空的話會(huì)提示,符合校驗(yàn)規(guī)則會(huì)觸發(fā)父組件內(nèi)方法更新視圖數(shù)據(jù)
    isValid() {
      // 把el-input輸入框中的值賦給form對(duì)象,方便下一步向父組件傳遞
      this.form[this.propValue] = this.value;
      this.$refs["formRef"].validate(valid => {
        if (valid) {
          this.$emit("updateData", this.form, this.indexValue);
        }
      });
    }
  }
};
</script>

2.在要用到的地方引入使用組件

// 1.引入組件路徑
import InputRequired from "./components/input-required.vue";
 
// 2.注冊(cè)組件
components: {
    InputRequired
  },
 
// 3.使用組件 里面的disabled等屬性按照自己需求添加就行,但是注意需要使用冒號(hào) : 動(dòng)態(tài)綁定數(shù)據(jù)
//   (1)這里的propValue是自定義組件里prop要綁定的屬性,以及form中的屬性;
//   (2)labelValue是自定義組件中l(wèi)abel的值;
//   (3)isDisalbed是決定自定義組件中disabled是否啟用;
//   (4)updateData方法用處是子組件內(nèi)校驗(yàn)成功后觸發(fā)父組件更新數(shù)據(jù);
 
<input-required :propValue="'attrName'" :labelValue="'模型參數(shù)'" :isDisalbed="true" 
 @updateData="updateData" ></input-required>

成功(*^▽^*)!

----------------------------------------------------手動(dòng)分割線------------------------------------------

今天下午寫著寫著突然想到,需求好像又不完全像上面的第二種一樣,再更新一下吧,而且個(gè)人用著感覺這一版可能判斷更精準(zhǔn)一點(diǎn).

需求是點(diǎn)擊確認(rèn)按鈕,會(huì)判斷參數(shù)值是否都填寫了,但凡有一個(gè)沒填寫都會(huì)提示需要填寫完整;只有所有的都填寫完整才會(huì)繼續(xù)往下運(yùn)行.

代碼更新:

<!--這里設(shè)置ref動(dòng)態(tài)綁定是給每一行唯一標(biāo)識(shí),不然表單校驗(yàn)的時(shí)候只會(huì)校驗(yàn)其中一行的數(shù)據(jù),
無(wú)法按照我們的想法每一行都去校驗(yàn),這樣即使有沒填的也不會(huì)警告了,這可不行o(╯□╰)o -->
<input-required
                    :ref="`required${scope.$index}`"
                    :propValue="'attrValue'"
                    :labelValue="'參數(shù)值'"
                    :isDisalbed="false"
                    :indexValue="scope.$index"
                    @updateData="updateData"
                  ></input-required>

自定義組件內(nèi)方法作如下修改:

isValid() {
      let flag = null;
      this.form[this.propValue] = this.value;
      this.$refs["formRef"].validate(valid => {
        if (valid) {
          flag = true;
          this.$emit("updateData", this.form, this.indexValue);
        } else {
          flag = false;
        }
      });
     // 把每次校驗(yàn)的結(jié)果返回給父組件
      return flag;
    }

父組件內(nèi)判斷是否全部填寫完畢:

// 確認(rèn)配置完成,生成模型配置信息
    submit() {
      let flag = true;
      // flag并上每一行校驗(yàn)的結(jié)果,如果全部填寫,最后就是true,但凡有一行沒有填寫,flag都會(huì)是false
      for (let index = 0; index < this.algorithmParamOptions.length; index++) {
        flag = flag && this.$refs[`required` + index].isValid();
      }
      if (flag) {
        .......
      } else {
        this.$modal.msgError("請(qǐng)先填寫完整!");
      }
    },