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 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
· 用 C# 插值字符串处理器写一个 sscanf