Typescript + Vue 2.x版本，使用element-ui中form表单验证的问题记录

报错：Property ‘validate’ does not exist on type ‘Vue | Element | Vue[] | Element[]’. Property ‘validate’ does not exist on type ‘Vue’.

错误分析:

  Property ‘validate’ does not exist on type ‘Vue | Element | Vue[] | Element[]’ 意思是说validate找不到，它不知道是哪个类型的属性，因为我们这里用到了TypeScript，而TypeScript 又是强类型检查所以报了这个错。

解决方法：

 validate找不到类型，此时可以使用类型断言，将 validate 断言成： HTMLFormElement，亲测有效。

submitForm(formName) {
     
    const ref:any = this.$refs[formName] as HTMLFormElement
    ref.validate((valid:boolean) => {
     
      if (valid) {
     
      // 处理逻辑
      }
    })
  }

或者使用：

// 引入el-form
import {
      Form as ElForm} from 'element-ui'

//进行表单验证
submitForm(formName) {
     
    (this.$refs[formName] as Form).validate((valid:boolean) => {
     
      if (valid) {
     
      // 处理逻辑
      }
    })
  }

错误：form的validate（）方法不执行（不进入该方法）

  即在提交表单验证时，validate() 方法中的逻辑无法运行，导致表单验证失效

错误分析：

  自定义校验规则时，需要添加callback回调，否则规则执行不过去。

private checkName(rule:any, value:any, callback:any) {
     
    if (value === '') {
     
      callback(new Error('名称不能为空'))
    } else {
     
      callback()  // 注意条件预计else里，也需要添加callback。即就是 if else 语句中都需要添加callback
    }
  }

注意：此处自定义的校验方法，使用官方示例中 的 箭头函数 的定义时，会导致无法触发（具体原因未知，初步分析是this指向问题），切换成普通函数的写法即可正常触发。

错误：无法获取在方法中return的值

  表单验证中，需要对表单输入的用户名称进行是否可用的验证，向后台查询是否存在，若存在需要在表单验证中给出相应的错误提示。所以需要将接口返回的值作为判断依据。

错误写法：

mounted() {
     
    this.isVisiableName = this.checkNameVisiable('')
    console.log(this.isVisiableName) //undefined
  }

  private checkNameVisiable(value:string) {
     
    checkName({
     'userName':value}).then(res=> {
     
      return res.data
    })
  }

正确写法：

mounted() {
     
    this.checkNameVisiable('',(data)=>{
     
      console.log(data) 
    })
  }

  private checkNameVisiable(value:string,callback:any) {
     
    checkName({
     'userName':value}).then(res=> {
     
      callback( res.data)
    })
  }

其他尝试

  尝试定义一个变量由于接收 查询返回的值（将查询会的值赋值给此变量），在使用此变量在表单验证中进行判断。但依然正常无法获得改值，原因可能是请求操作是异步的，在表单验证是异步请求的结果尚未返回，而结果返回后并不能在此触发表单验证。
  尝试给上述方式添加延时器setTimeout，在查下返回后再执行表单验证，但不幸的是，依然无法正确生效。
  如有更好的方法，欢迎指教！！！

提前祝大家新年快乐

  还有30多个小时就进入2021年了，提前祝大家新年快乐，身体健康！