时间戳

首页 > 解决方案 > 如何向 taginput 元素添加验证？

javascript - 如何向 taginput 元素添加验证？

问题描述

在我的Vue.js应用程序中，我使用库的taginput元素Buefy。我想为输入添加验证。可以只输入数字，不输入字母。我尝试了下一个代码，但不幸的是它没有用。如何解决这个问题？

<b-taginput v-model="tags" type="is-warning" @keypress='onlyNumberValidation'>
</b-taginput>

onlyNumberValidation ($event) {
    let keyCode = ($event.keyCode ? $event.keyCode : $event.which)
    if ((keyCode < 48 || keyCode > 57) && keyCode !== 46) {
        $event.preventDefault()
    }
}

标签： javascriptvue.jsvuejs2

解决方案

您可以通过使用默认功能检查输入以简单的方式完成，如下所示模板

<div id="app" class="container">

    <section>
        <b-field label="Tags with 3 characters">
            <b-taginput
v-model="tags"

:before-adding="beforeAdding">
            </b-taginput>
        </b-field>
    </section>

</div>

脚本

beforeAdding(tag) {
            return tag.match(/^\d+$/);
        },

下面是作为演示的 codepen 链接 https://codepen.io/anon/pen/wNooaY?editors=1010

推荐阅读