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

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

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

前言

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

第一種（多個el-input同時限制）：

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

HTML代碼:

<!-- 第一步對應(yīng) :model="ruleForm" ;第二步對應(yīng) :rules="rules" ;第三步對應(yīng) ref="ruleForm"-->
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <!-- 這里的 prop 也不可少,是與rules中定義的每個屬性的校驗(yàn)規(guī)則是一一對應(yīng)的-->
  <el-form-item label="活動名稱" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="活動區(qū)域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="請選擇活動區(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="活動時間" 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="選擇時間" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="即時配送" prop="delivery">
    <el-switch v-model="ruleForm.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活動性質(zhì)" 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>
  <el-form-item label="特殊資源" prop="resource">
    <el-radio-group v-model="ruleForm.resource">
      <el-radio label="線上品牌商贊助"></el-radio>
      <el-radio label="線下場地免費(fèi)"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活動形式" 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ù)對象,并綁定
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        // 第二步,定義表單數(shù)據(jù)校驗(yàn)對象,并綁定
        rules: {
          name: [
            { required: true, message: '請輸入活動名稱', trigger: 'blur' },
            { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '請選擇活動區(qū)域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '請選擇日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '請選擇時間', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '請至少選擇一個活動性質(zhì)', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '請選擇活動資源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '請?zhí)顚懟顒有问?, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        // 第三步,點(diǎn)擊提交表單按鈕的時候判斷是否符合校驗(yàn)規(guī)則,符合才會往下運(yùn)行,不符合會
        // 按照你定義的校驗(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>

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

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

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="`請輸入${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來接收父組件內(nèi)傳過來的數(shù)據(jù)
  props: ["propValue", "labelValue", "isDisalbed", "indexValue"],
  created() {
   // 給子組件的對象動態(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)后會校驗(yàn)數(shù)據(jù),空的話會提示,符合校驗(yàn)規(guī)則會觸發(fā)父組件內(nèi)方法更新視圖數(shù)據(jù)
    isValid() {
      // 把el-input輸入框中的值賦給form對象,方便下一步向父組件傳遞
      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.注冊組件
components: {
    InputRequired
  },
 
// 3.使用組件 里面的disabled等屬性按照自己需求添加就行,但是注意需要使用冒號 : 動態(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>

成功(*^▽^*)!

----------------------------------------------------手動分割線------------------------------------------

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

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

代碼更新:

<!--這里設(shè)置ref動態(tài)綁定是給每一行唯一標(biāo)識,不然表單校驗(yàn)的時候只會校驗(yàn)其中一行的數(shù)據(jù),
無法按照我們的想法每一行都去校驗(yàn),這樣即使有沒填的也不會警告了,這可不行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都會是false
      for (let index = 0; index < this.algorithmParamOptions.length; index++) {
        flag = flag && this.$refs[`required` + index].isValid();
      }
      if (flag) {
        .......
      } else {
        this.$modal.msgError("請先填寫完整!");
      }
    },