使用ElementUI循環生成的Form表單添加校驗
ElementUI循環生成的Form表單添加校驗
ElementUI 中使用循環生成的form表單需要動態添加校驗的規則
在data中定義好需要的rule,使用Element的語法給 :rules 動態綁定
:prop="getAllTableData.${i}.value"
getAllTableData是v-for綁定的數組,i是索引,value是表單綁定的v-model的名稱
HTML代碼片段
// An highlighted block <!-- dialog --> <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" @close="dialogClose" :close-on-click-modal="false" width="40%" class="dialogForm-box" > <el-form label-position="left" label-width="120px" ref="dialogRef" :model="getAllFormData" > <!-- 循環開始 --> <template v-for="(item,i) in getAllFormData.getAllTableData"> <!-- 判斷循環中的元素是否需要下拉框 :rules="item.rule" 循環中的數據 自定義的 rule 規則 :prop="`getAllTableData.${i}.value`" 每次循環的時候進行取值, 相當於給每個form綁定瞭唯一的model --> <el-form-item v-if="item.selectFlag" :key="item.labelName" :label="item.labelName" :prop="`getAllTableData.${i}.value`" :rules="item.rule" class="selectInput-box" > <el-select v-model="item.value" placeholder="請選擇"> <el-option v-for="(item1) in item.selectOption" :key="item1.value" :label="item1.label" :value="item1.value" ></el-option> </el-select> </el-form-item> <el-form-item v-else-if="!item.hidden && item.disabled" :key="item.labelName" :prop="`getAllTableData.${i}.value`" :rules="item.rule" :label="item.labelName" > <el-input v-model="item.value" clearable autocomplete="off" :disabled="true" ></el-input> </el-form-item> <el-form-item v-else-if="!item.hidden" :key="i" :prop="`getAllTableData.${i}.value`" :rules="item.rule" :label="item.labelName" > <el-input v-model="item.value" clearable autocomplete="off"></el-input> </el-form-item> </template> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogFormVisible = false">取 消</el-button> <el-button type="primary" @click="FormSureBtn" :loading="SureBtnLoading">確 定</el-button> </div> </el-dialog>
VUE中data中的聲明
getAllFormData: { getAllTableData: [ { labelName: "規則ID", value: "", propName: "ruleid", disabled: true, hidden: true, // 規則必須也得定義在form綁定的model中 rule: { required: false } }, { labelName: "編碼", value: "", propName: "code", rule: { // ElementUI 表單校驗規則的語法 validator: (rule, value, callback) => { if (value == "") { callback(); } else { // 采用正則表達式進行判斷 let reg = /[\u4E00-\u9FA5\uF900-\uFA2D]/; if (reg.test(value)) { callback(new Error("請輸入英文或數字")); } else { callback(); } } }, trigger: "blur" } }, { labelName: "名稱", value: "", propName: "name", rule: {} }, { labelName: "審核類別", value: "", propName: "typename", rule: {} }, { labelName: "字段名稱", value: "", propName: "fieldcode", rule: {} }, { labelName: "備註", value: "", propName: "memo", rule: {} }, { labelName: "評分", value: "", propName: "mark", prop: "mark", rule: { required: true, validator: (rule, value, callback) => { if (value == "") { callback(new Error("請輸入數字")); } else { let reg = /^[0-9]+([.]{1}[0-9]{1})?$/; if (!reg.test(value) || value > 100) { callback(new Error("請輸入0-100的有效數字,可保留一位小數")); } else { callback(); } } }, trigger: "blur" } }, { labelName: "警告標識", value: "", propName: "warnsign", prop: "warnsign", selectFlag: true, selectOption: [ { value: "0", label: "否" }, { value: "1", label: "是" } ], rule: { required: true, message: "請選擇對應的選項" } } ] },
效果圖
required: true,說明該內容是必須填寫的
正則表達式可以自定義項目需求的樣式
ElementUI循環動態生成表單校驗問題
<el-form :model="upsertForm" ref="upsertForm" label-width="100px" class="demo-dynamic"> <el-form-item prop="email" label="郵箱" :rules="[ { required: true, message: '請輸入郵箱地址', trigger: 'blur' }, { type: 'email', message: '請輸入正確的郵箱地址', trigger: ['blur', 'change'] } ]" > <el-input v-model="upsertForm.email"></el-input> </el-form-item> <el-form-item v-for="(domain, index) in upsertForm.domains" :label="'專利號' + index" :key="domain.key" :prop="'domains.' + index + '.value'" :rules="{ required: true, message: '專利號不能為空', trigger: 'blur' }" > <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">刪除</el-button> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('upsertForm')">提交</el-button> <el-button @click="addDomain">新增專利號</el-button> <el-button @click="resetForm('upsertForm')">重置</el-button> </el-form-item> </el-form> <script> export default { data() { return { upsertForm: { domains: [{ value: '' }], email: '' } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); }, removeDomain(item) { var index = this.upsertForm.domains.indexOf(item) if (index !== -1) { this.upsertForm.domains.splice(index, 1) } }, addDomain() { this.upsertForm.domains.push({ value: '', key: Date.now() }); } } } </script>
註意:循環的是文本框,它隸屬於form 表單,form 表單綁定的是upsertForm ,所以,它的對象必須要在upsertForm 裡面,才能生效
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- Vue之ElementUI Form表單校驗
- vue使用rules實現表單字段驗證
- vue表單驗證rules及validator驗證器的使用方法實例
- element ui提交表單返回成功後自動清空表單的值的實現代碼
- el-form resetFields無效和validate無效的可能原因及解決方法