vue?el-input設置必填提示功能(單個與多個)
更新時間：2023年02月18日 11:07:27 作者：怎么吃不飽捏
有的功能需要設置必填項,當然也需要判斷是不是添上了,下面這篇文章主要給大家介紹了關于vue?el-input設置必填提示功能(單個與多個)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
前言
有兩種:一種是多個el-input通過同一個el-form表單來限制,這種用得最多的地方就是添加和修改功能;另一種是每個el-input通過各自的el-form表單來限制,這種通常是用在動態(tài)添加多個輸入框等功能上，話不多說，上才藝噻.
第一種（多個el-input同時限制）：
舉栗（element-ui官網(wǎng)的案例）：
HTML代碼:
<!-- 第一步對應 :model="ruleForm" ;第二步對應 :rules="rules" ;第三步對應 ref="ruleForm"-->
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<!-- 這里的 prop 也不可少,是與rules中定義的每個屬性的校驗規(guī)則是一一對應的-->
<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="線下場地免費"></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ù)校驗對象,并綁定
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) {
// 第三步,點擊提交表單按鈕的時候判斷是否符合校驗規(guī)則,符合才會往下運行,不符合會
// 按照你定義的校驗規(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設置必填限制):
我是自己封裝的組件,暫時沒想到其他的方式,目前看來是能符合功能需求的。
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)添加屬性并設置屬性值
this.$set(this.form, this.propValue, "");
this.$set(this.formRules, this.propValue, [
{ required: true, message: `${this.labelValue}不能為空`, trigger: "blur" }
]);
},
methods: {
// el-input失去焦點后會校驗數(shù)據(jù),空的話會提示,符合校驗規(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)校驗成功后觸發(fā)父組件更新數(shù)據(jù);
<input-required :propValue="'attrName'" :labelValue="'模型參數(shù)'" :isDisalbed="true"
@updateData="updateData" ></input-required>成功(*^▽^*)!
----------------------------------------------------手動分割線------------------------------------------
今天下午寫著寫著突然想到,需求好像又不完全像上面的第二種一樣,再更新一下吧,而且個人用著感覺這一版可能判斷更精準一點.
需求是點擊確認按鈕,會判斷參數(shù)值是否都填寫了,但凡有一個沒填寫都會提示需要填寫完整;只有所有的都填寫完整才會繼續(xù)往下運行.
代碼更新:
<!--這里設置ref動態(tài)綁定是給每一行唯一標識,不然表單校驗的時候只會校驗其中一行的數(shù)據(jù),
無法按照我們的想法每一行都去校驗,這樣即使有沒填的也不會警告了,這可不行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;
}
});
// 把每次校驗的結果返回給父組件
return flag;
}父組件內(nèi)判斷是否全部填寫完畢:
// 確認配置完成,生成模型配置信息
submit() {
let flag = true;
// flag并上每一行校驗的結果,如果全部填寫,最后就是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("請先填寫完整!");
}
},總結
到此這篇關于vue el-input設置必填提示功能的文章就介紹到這了,更多相關el-input設置必填提示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了vue項目nav導航欄的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
本文主要介紹了vue-class遷移vite的一次踩坑記錄，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要為大家介紹了詳解vue3中如何使用youtube-player示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
本文主要介紹了淺談vue中文件下載的幾種方式及方法封裝，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
axios是用來做數(shù)據(jù)交互的插件，最近正在學習axios，所以想著整理成筆記方便大家和自己參考學習，下面這篇文章主要跟大家介紹了關于Axios使用方法的相關資料，需要的朋友們下面來一起看看吧。2017-07-07
這篇文章主要為大家詳細介紹了Vue的diff算法原理，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了vue3+vite+antd如何實現(xiàn)自定義主題問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
使用konva和vue-konva庫實現(xiàn)拖拽滑塊驗證功能
這篇文章主要介紹了使用konva和vue-konva完成前端拖拽滑塊驗證功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
關于Vue中使用alibaba的iconfont矢量圖標的問題
這篇文章主要介紹了Vue使用alibaba的iconfont矢量圖標的問題，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-12-12
vue3純前端表格數(shù)據(jù)的導出與導入實現(xiàn)方式
這篇文章主要介紹了如何在純前端環(huán)境下使用xlsx-js-style庫進行Excel表格文件的下載,并自定義樣式,還提到了使用xlsx庫進行Excel表格數(shù)據(jù)的導入,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-01-01