vue表单验证插件或者这个功能有做过的吗

其实就类似下面这个功能

但是还需要，input 边框变红色，现在的做法就是每个input都被包裹了一个Tooltip 控件，改的贼难受

回答

处理好了

使用 Ant Design 框架的
vue3
最终效果

后面是直接修改css变成类似效果的

.ant-form-item-explain.ant-form-item-explain-success>div,
.ant-form-item-explain.ant-form-item-explain-error>div {   
   position: absolute;
  left: calc(-3% + 8px);
  top: calc(-78% - 0px);
  transform: translateY(-50%);
  width: max-content;
  max-width: 120px;
  display: none;
  color: #fff;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 4px;
  z-index: 999; 
}
.ant-form-item-control-input:hover + .ant-form-item-explain > div {
  display: block;
}


.ant-form-item-explain.ant-form-item-explain-error>div 
{  
  background:  rgb(255 77 79);
}

.ant-form-item-has-error .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input) .ant-select-selector ,
.ant-form-item-has-error :not(.ant-input-disabled):not(.ant-input-borderless).ant-input, .ant-form-item-has-error :not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper, .ant-form-item-has-error :not(.ant-input-disabled):not(.ant-input-borderless).ant-input:hover, .ant-form-item-has-error :not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:hover{
  background-color: #fff1f1 !important;
}

.ant-form-item-explain.ant-form-item-explain-error>div:after {
  content: "";
  border: 8px solid transparent;
  border-right-color: rgb(255 77 79);
  position: absolute;
  left: 0px;
  top: 53%;
  margin-top: 15px;
  transform: rotate(270deg);
}

.ant-form-item-explain.ant-form-item-explain-success,
.ant-form-item-explain.ant-form-item-explain-error { 
  display: contents;
}