vue3 ant-Design-vue提交按钮放在表单外提交,自定义提交按钮

复制代码
<template>
     <a-form ref="urlEditRef" :model="urlEditInfo"         
     name="urlEdit_rule" layout="vertical">
       <a-form-item label="跳转链接" name="longUrl"
       :rules="[{ required: true, message: '请输入跳转链接' }, { pattern: /(https):\/\/([\w.]+\/?)\S*/, message: '请输入正确格式的https地址' }]">
         <a-input v-model:value="urlEditInfo.longUrl" allow-clear placeholder="跳转链接" />
       </a-form-item>
       <a-form-item label="链接标题" name="title" :rules="[{ required: true, message: '请输入链接标题' }]">
         <a-input v-model:value="urlEditInfo.title" allow-clear placeholder="链接标题" :maxlength="32" :showCount="true" />
       </a-form-item>
    </a-form>

    //button在 a-form标签外边
      <a-button type="primary" @click="handleSubmit_c" v-onceClick>确定</a-button>
</template>
复制代码
复制代码
<script setup>
      const urlEditRef = ref(null)  //用来保存上边a-form中的ref
    const handleSubmit_c = () => {
    console.log('handleSubmit');
    urlEditRef.value.validate().then(() => {
        console.info("-=-=-=-=通过");
    })
        .catch((err) => {
            console.info("不通过", err);
        });

}
</script>
复制代码

 

本文作者:seven&night

本文链接:https://www.cnblogs.com/bisiyuan/p/17282895.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   seven&night  阅读(999)  评论(1编辑  收藏  举报
相关博文:
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
· 用 C# 插值字符串处理器写一个 sscanf
点击右上角即可分享
微信分享提示
💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
收起
  1. 1 晴天 刘瑞琦
晴天 - 刘瑞琦
00:00 / 00:00
An audio error has occurred.