1. 先封一个校验方法: 方法代码: formRulesValidate(fName){ return new Promise((resolve)=>{ this.$refs[fName].validate(valid=>{ if(valid) resolve(valid); }); }); }, 2. 保存,确定按钮点击得时候触发: saveVal(AgencyForm) { let formRulesOneRes = this.formRulesValidate('companyData'); ...
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的:rules="rules"结合this.$refs[formName].validate((valid) => {}来做。实现代码:1.父组件设置rules规则,然后传入每个子组件:...
<el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> <el-form-item label="活动形式" prop="desc"> <el-input type="textarea" v-model="item.desc"></el-input> </el-form-item> </el-fo...
</el-form-item> </div> </el-form> ``` 2. data结构如下:rules为个表单项的验证规则 ``` data() { return { resumes: { List: [{ startDate: '', endDate: '', phone: '' }] }, rules: { // 添加校验 startDate: [{ required: true, ...
formArr.forEach(item => { //根据表单的ref校验 checkForm(item) }) Promise.all(resultArr).then(values => { this.submitForm() // 此时必填完成,做保存后的业务操作 }).catch( _ => { console.log('err') }) }, } }</script>
el-form设置规则校验，在⽗⼦组件中多个表单需同时校验 如上：数据源和格式化分别在不同的两个⼦组件中，同时引⽤在了⽗组件中，需要在⽗组件中点击确定按钮时，校验⽗组件及两个⼦组件中的表单是否均满⾜校验。使⽤el-form的:rules="rules"结合this.$refs[formName].validate((valid) => {}...
el-form-item校验多个字段 <el-form-item label="考勤周期:" prop="cycleEnd"> <el-select @change="cycleChange" v-model="formmodel.cycle"> <el-option v-for="item in cycleOption" :key="item.id" :label="item.label" :value="item.id"...
1. 理解el-form的校验规则基本概念 Element UI的el-form组件提供了表单验证功能,可以通过rules属性绑定一个验证规则对象。每个表单项(如el-form-item)可以对应一个或多个验证规则。 2. 学习如何在el-form中定义自定义校验规则 自定义校验规则通常是一个对象,包含validator属性,该属性是一个函数,用于执行具体的校验...
element表单中⼀个el-form-item下多个form-item项校验（循环 校验）在+element的项⽬中，需要对form表单下的⼀个form item中校验多项数据，如下图：代码实现（需要注意prop的值）：<div class="send-wrap"> <div class="send-header"> <p class="title">在线下单</p> </div> <el-form :model="...