首页 Ant Design Vue 校验单个input 必填没有form

Ant Design Vue 校验单个input 必填没有form

时间: 2024-12-23 07:23:45 浏览: 121

在 Ant Design Vue（简称 AVue）中，即使没有 Form 组件，也可以对单个 Input 字段进行必填校验。你可以直接利用 Vue 自带的 v-model 绑定和条件渲染来实现这个功能。这里是一个简单的例子： ```html <template> <div> <a-input v-model="name" placeholder="请输入姓名" :rules="{ required: true, message: '名字不能为空', trigger: 'blur' }"></a-input> <span v-if="name === ''">名字不能为空</span> </div> </template> <script> export default { data() { return { name: '', }; }, watch: { name(newName, oldName) { if (newName === '') { this.$refs.inputField.focus(); // 当名字为空时聚焦到输入框 } }, }, }; </script> ``` 在这个例子中，`v-model` 将用户的输入绑定到 `name` 数据属性上。`:rules="{ required: true, ... }"` 规则是告诉 Vue，在 `name` 变为空时触发必填验证。当验证不通过时，Vue会在标签上显示错误消息。注意，`trigger: 'blur'` 表示验证会在用户停止输入（鼠标失去焦点或按下回车键）时自动触发。如果你希望实时验证，可以将 `trigger` 设置为 `'change'` 或去掉此属性。

阅读全文