ant design vue框架中自定义表单或单个表单框验证

一.项目要求

1.要求：点击新增按钮弹出新增页面，在输入名称时进行验证，当输入名称和列表下的名称相同，即后台数据库中存在，此时将会提醒用户，该名称已存在，
2.要求：该名称不存在，则新增成功

二.思路

1.错误的思路
我刚开始的思路是，准备在点击新增页面中的确定按钮时进行验证，但此时会存在一个问题：
——点击确定时，已经调用了后台新增接口，此时新增的需要输入的表单数据已经传给后台，此时并不能做到验证名称是否存在——和重复，所以此时我通过后台给我的验证接口，验证后台数据库中是否存在该名称将毫无意义
2.正确效果
——应该的效果应该为名称输入和验证应该同时进行，一旦输入数据和下方列表重复，将会出现message提醒，当不输入任何内容时，此时将会提醒此输入框并不能为空
3.正确的思路
——应该使用ant design vue 中的表单验证，自定义验证表单元素，定义表单验证规则

三.步骤

1.定义表单输入框中的值的规则
在ant design vue中， "v-decorator"可以看成是v-model，和vue中的双向绑定作用类似
——v-decorator="[id, options]"
其中的id:必填输入控件唯一标志。支持嵌套式的写法。——算是一个普通的id名
options：一般是书写对于表单框中的值的验证 ——即 validatorRules.(自定义的变量值)

2.书写表单规则

rules：支持多个api(官网中有说)
len：字段长度 number
max：最大长度 number
message：校验文案(即提醒信息) string
min：最小长度 number
pattern：正则表达式校验 RegExp
required：表单框是否必填 boolean
validator： 自定义校验规则(校验函数) function(rule,value,callback)
whitespace： 必填时空格是否会被视为错误

 validatorRules:{
          //修改
          name:{
            rules:[             //rules是验证规则，
              {
                required:true,       //是否为必填，否则将会出现提示信息
                message:'请输入团名称'      //当输入框为空时，呈现出的提示信息
              },
              {
                validator:this.checkName    //自定义的校验函数
              }
            ]
          }
          //修改
        },

3.定义校验函数
此函数每次必须返回一个callback()回调函数，否则将无法生效

//验证name是否重复和存在
      checkName(rule,value,callback){
        if(value==''|| value==undefined ){
          // console.log('空和undefined')
          callback("")
          return
        }else if(value!=''){
          // console.log('不为空')
          if(this.title=='新增'){
            this.param.countyName=value     //param是自己定义的一个空对象，且后台接口是处于不同的页面，所传递的参数不一样
            // console.log(this.param)
          }else if(this.title=='编辑'){
            this.param.countyName=value
            this.param.countyId=this.model.id
            // console.log(this.param)
          }
          //调用接口，且传值，此处的getaAction()是自定义封装的get请求方法，其实就是axios
          getAction('/west/county/checkExist',this.param).then((res)=>{
            if(res.success){
              callback()  //如果成功，此时返回一个回调，进行下一步，(虽说我也不知道为什么返回一个空的回调，可以进行下一步)
            }else{
              callback('团名已存在')
            }
          })
        }
      },