工作总结：特殊的表单验证

普通的表单验证

• 直接在el-form里面加rules进行验证;
• 在el-form-item里面加prop，来绑定需要验证的值

<el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="isReadOnly">

   <el-form-item label="企业法人" prop="legalPerson">
   
    <el-input v-model="form.legalPerson" placeholder="请输入企业法人" maxlength="50" />
    
  </el-form-item>
  
   <el-form-item label="开户行" prop="bank">
   
   <el-input v-model="form.bank" placeholder="请输入开户行" maxlength="50" />
   
   </el-form-item>
   
    <el-form-item label="银行账户" prop="bankAccount">
    
 <el-input v-model="form.bankAccount" placeholder="请输入银行账户" maxlength="50" />
 
</el-form-item>

</el-form>

----------··

rules: {

legalPerson: [{ required: true, message: '企业法人不能为空', trigger: 'blur' }],

bank: [{ required: true, message: '开户行不能为空', trigger: 'blur' }],

bankAccount: [{ required: true, message: '银行账户不能为空', trigger: 'blur' }],


   },

特殊的表单验证

• 上面验证的是form.legalPerson,form.bank,form.bankAccount。
• 当需要验证的对象，是form.contacts子对象form.contact.item的时候，该怎么办？

<div v-for="(item, index) in form.contacts" :key="index" class="form-item-flex" style="border: 1px solid #eee">


<el-form-item label="手机号" :prop="'phoneNum'+index" :rules="[
      { required: true, message: '请输入手机号', trigger: 'blur' } ]">
      
<el-input v-model="item.phoneNum" placeholder="请输入手机号" @input="handleInput($event, index)"/>

</el-form-item>


<el-form-item label="邮箱" :prop="'email'+index" :rules="[
 { required: true, message: '请输入邮箱', trigger: 'blur' },
 { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]">
    
<el-input v-model="item.email" placeholder="邮箱" @input="handleInputEmail($event, index)"/>

</el-form-item>

</div>

• 在methods里面

methods: {
	handleInput(e, i) {
	this.$set(this.form, 'phoneNum'+i, e)
		},
	handleInputEmail(e, i) {
	this.$set(this.form, 'email'+i, e)
		},
                }

• 就这样结束，我同事给写的。