elementUI中form表单验证

表单的验证在日常还挺常用的，第一次上手遇见一些问题，记录一下啊

想要实现类似功能，首先

<template>
	<el-form
	    label-width="120"
	    :rules="rules" //必备 校验规则
	    :model="form" //必备 数据源
	    :ref="form" //必备 需要验证的表单元素节点
	    inline>
	    <el-form-item label="入组成功奖金">
	      <el-input v-model="form.successBonus"></el-input>
	    </el-form-item>
	    <el-form-item label="入组失败奖金"  prop="exam">//exam是data中rules对象中的一项
	      <el-input v-model="form.failBonus"></el-input>
	    </el-form-item>
	</el-form>
</template>

<script>
export default {
data () {
    var validatePass = (rule, value, callback) => {
      if (this.form.failBonus > this.form.successBonus) {
        callback(new Error('失败大于成功!'))
      } else {
        callback()
      }
    }
    return {
      form: {
        successBonus: '',
        failBonus: ''
      },
      rules: {
        exam: { validator: validatePass, message: '失败奖金不允许大于成功奖金', trigger: 'blur' } 
      }
    }
  },
}
</script>

有几个必选项，注意看代码中的注释。