vue3.0中使用ant design vue 表单内部分元素不校验

博主最近在写vue3.0项目 组件库为蚂蚁金服的ant design vue 在写表单时,有一个短信登陆的需求
布局为左边Input框 右边按钮 源码大概如下

<a-form-item label="短信登录" name="code">
<a-row>
      <a-col :span="14">
          <a-input
              v-model:value="loginForm.code"
          />
      </a-col>
      <a-col :span="10">
          <a-button>发送短信</a-button>
      </a-col>
  </a-row>
</a-form-item>

已经加入了rules规则校验 如下

const loginRules = {
    code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
}

但是页面效果显示失去焦点时没有校验 找到了官方的解释

大概意思就是在底层逻辑的校验实现中 会获取a-from-item标签下的唯一子元素进行劫持，即如果想实现校验就必须保证被校验的元素处于a-from-item标签下的第一级并且为第一级的第一个元素, 不能再外部套用其他任何标签,否则无法劫持该校验元素

但是有些页面布局要求我们不得不在input框等表单组件外加div等标签, 此时无法校验怎么办勒. 官方给出了解决方案 在input组件上加入

@blur="() => {$refs.name.onFieldBlur()}"

或者

@change="() => {$refs.name.onFieldChange()}"

这个时候坑就来了 按照官方的写法 我发现我的页面报错了 提示该ref并没有此方法
源码如下

template:
<a-form
    ref="loginFormref"
     :model="loginForm"
     :rules="loginRules"
     class="loginform"
 >
	<a-input
	     @blur="codeverify"
	     v-model:value="loginForm.code"
	 />
 </a-form>

Ts:
const loginFormref = ref<any>(null)
const codeverify = () => {
    console.log(unref(loginFormref),'获取到的ref')
 }
return {
   loginFormref,
   codeverify
}

打印结果

可以看到并没有官方给出的 onFieldBlur和onFieldChange方法;
这就尴尬了 那是不是说明没有解决方案勒

嘿嘿这个时候我的方案就来啦:
使用validateField函数 可以看到原型上有该方法 执行该方法 传入v-mode绑定的字段名即可
源码如下

const codeverify = () => {
    unref(loginFormref).validateField('code')
}

这样就实现了 input框失去焦点后 自动校验的功能了(change校验同理 只不过是需要将Input框上的blur事件改为change事件)

这篇文章相当于我自己的一个记录 同时也希望对遇到同样困惑的您有所帮助