多个el-form时的校验 1. 先封一个校验方法: 方法代码: formRulesValidate(fName){ return new Promise((resolve)=>{ this.$refs[fName].validate(valid=>{ if(valid) resolve(valid); }); }); }, 2. 保存,确定按钮点击得时候触发: saveVal(AgencyForm) { let formRulesOneRes = this.formRulesValid...
2. 方法一 在上述代码中,我们给每个el-form表单添加了 ref 属性,分别为 form1 和 form2,在 submit 方法中,分别对两个表单使用 validate 方法进行表单校验 export default {data() {return {form1: {},form2: {},rules1: {},rules2: {}}},methods: {submit() {const form1Valid = this.$refs.for...
<el-form-item label="发放计划编码"prop="name1"> <el-input v-model="ruleForm.name2"style="width: 200px"></el-input> </el-form-item> <el-form-item label="发放计划名称"prop="name2"> <el-input v-model="ruleForm.name2"style="width: 200px"maxlength="50"show-word-limit></el-i...
</el-form-item> <el-form-item label="结束时间:" :prop="'List.'+ index +'.endDate'" :rules="rules.endDate"> <el-input v-model="item.endDate" type="password" /> </el-form-item> <el-form-item label="手机号:" :prop="'List.'+ index +'.phone'" :rules="rules.phone"> <...
formArr.forEach(item => { //根据表单的ref校验 checkForm(item) }) Promise.all(resultArr).then(values => { this.submitForm() // 此时必填完成,做保存后的业务操作 }).catch( _ => { console.log('err') }) }, } }</script>
1. 理解el-form的校验规则基本概念 Element UI的el-form组件提供了表单验证功能,可以通过rules属性绑定一个验证规则对象。每个表单项(如el-form-item)可以对应一个或多个验证规则。 2. 学习如何在el-form中定义自定义校验规则 自定义校验规则通常是一个对象,包含validator属性,该属性是一个函数,用于执行具体的校验...
<el-form-item label="活动区域" prop="region"> <el-select v-model="item.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option>
el-form设置规则校验，在⽗⼦组件中多个表单需同时校验 如上：数据源和格式化分别在不同的两个⼦组件中，同时引⽤在了⽗组件中，需要在⽗组件中点击确定按钮时，校验⽗组件及两个⼦组件中的表单是否均满⾜校验。使⽤el-form的:rules="rules"结合this.$refs[formName].validate((valid) => {}...
实现:需要注意的是el-form表单:model绑定的值必须要求是对象,注意el-form-item上prop绑定值的区别。 prop属性作用:使表单元素值与数据对象中的值对应绑定,以及绑定校验和数据更新 第一层 正常for循环结构与绑定key,注意第一层循环后再prop绑定 `此层遍历的数据名.${遍历的索引值}.属性名 ` ...
1.在el-form组件中,使用v-for指令渲染循环表单的每个子表单项。 2.在每个子表单项中,使用ref属性给表单项命名,方便后续获取表单项对象。 3.在el-form组件的校验方法中,遍历循环表单的每个子表单项,并通过this.$refs获取每个子表单项的实例对象。 4.调用每个子表单项实例对象的validate方法进行校验。 具体代码示例...