el-form-item内多个输入框的 validate 校验

表单中复合型输入框， 使其都满足必填验证规则 。

<el-form ref="loaninfo" :model="formData" :rules="loanrules">

	<el-form-item label="申请贷款银行" prop="bank">
		<el-input placeholder="请填写分行和支行信息" v-model="formData.bank2" class="input-with-select" :style="{width: '100%'}">
			<el-select v-model="formData.bank1" slot="prepend" placeholder="请选择贷款银行" :style="{width: '200px'}">
				<el-option v-for="dict in bankOptions" 
					:key="dict.dictValue" :label="dict.dictLabel"
					:value="dict.dictValue" :disabled="dict.disabled">
				</el-option>
			</el-select>
		</el-input>
	</el-form-item> 
	
</el-form>

验证规则方法：
el-form 提供了表单校验功能， :rules 属性设置校验规则，并通过 el-form-item 的 prop 属性绑定校验规则。

需要注意的是，如果要用 rules 进行表单校验，那么 el-input 绑定的元素必须是 el-form 的 model 的直接属性，否则会导致校验失败。

export default {
	data() {
		// 自定义银行验证规则
		var bankRule = (rule, value, callback) => {
			if (!(this.formData.bank1 && this.formData.bank2)) {
				return callback(new Error('请输入完整的贷款银行信息'));
			} else {
				callback();
			}
		}
		
		return {
			loanrules: {   
				bank: [{ 
					required: true, 
					validator: bankRule, 
					trigger: 'change' 
				}]
			}
		}
	
	}
}

这段代码中 el-form 的 model 是 formData，那么 el-form-item 中所有需要校验的表单的 的 model 也必须是 formData.xxx ，即 formData 对象的直接属性。

效果：