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>