element-ui表单验证报错'validate' of undefined、ReferenceError: `addEmpForm` is not defined

刚使用Vue.js不久，所以有些东西该的不是很清楚，现在又加入了element-ui，所以还经常有错误的地方，这里记录一下。

错误1

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property ‘validate’ of undefined"
也找了不少博客，都是说把this.$refs[formName]中的formName和ref中的表名不相同导致的，实施情况就是这样，不过，我改完之后又遇到了下面的错误，以至于让我以为不是这样的。

错误2

[Vue warn]: Error in v-on handler: “ReferenceError: addEmpForm is not defined” addEmpForm是我的表名
我以为是不行，没想到的是，另有原因，原来我的data中返回的表单值就叫addEmpForm（第3行），然后在向后台传数据的时候（24行）没有使用this.addEmpForm而是直接使用addEmpForm 所以报错的时候让我直接感觉是表单名错了，然而却是这里除了问题。

//data返回值
return {
    addEmpForm:{
        userName: '',
        userPhone: '',
        userGender: '',
        userEmail: '',
        userIdCard: '',
        userBirthday: ''
    },
    // 验证规则
    rules:{
        userName:[{required: true, message:'职员姓名不能为空', tigger: 'blur'}],
        userPhone:[{validator: validatePhone, required: true}],
        userEmail:[{type:'mail',message:'邮箱格式不正确',tigger: 'blur'}],
        userIdCard:[{validator:validateIdCard,tigger:'blur'}],
    }
}
//提交表单的方法
submitAddEmp(formName){
  this.$refs[formName].validate((valid)=>{
         if(valid){
             this.axios.post('http://localhost:8888/users/addUser',{
                 form: addEmpForm
             }).then((data)=>{
                 console.log(data);
             });
         }
     });
 }

最后，细心一点啊，这点小问题花了我半个多小时，也是无语。