我有一个最初为空的密码重置表单,我想在提交时验证没有任何字段为空。 我正在为每个字段执行以下操作:

    <b-form-group id="currentPassword" 
              label="Old password"
              :invalid-feedback="oldPasswordFeedback">
        <b-form-input id="password" 
                      v-model="passwords.currentPassword" 
                      placeholder="Enter your old Password" 
                      type="password"  
                      maxlength="60" 
                      required/>
    </b-form-group>

表格是这样定义的

  <b-form validated="" id="passwordChangeForm" @submit.prevent="changePassword" class="container-fluid">

问题是,每当我导航到该页面时,默认情况下所有字段都被标记为无效并显示它们的错误消息,因为它们是空的。 我希望在提交表单时进行验证。 有没有一种简单的方法可以做到这一点而无需安装额外的验证插件?

#1楼 票数:2 已采纳

在您的组件声明中,您设置了required属性,该属性在您加载页面时尝试验证您的表单,因此您可以利用Vue.js并在您的数据对象中创建req属性,该属性最初设置为false

我提供以下简化示例来向您展示如何做到这一点

 new Vue({ el: '#app', data() { return { item:'', currentPassword:'', req:false } }, methods: { changePassword: function() { this.req=true; } } });
 <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" /> <!-- Add this after vue.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script> <script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script> <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script> <div id="app" class="container"> <div> <b-form validated="" id="passwordChangeForm" @submit.prevent="changePassword" class="container-fluid"> <b-form-group id="currentPassword" label="Old password"> <b-form-input id="password" v-model="currentPassword" placeholder="Enter your old Password" type="password" :required="req" /> </b-form-group> <b-button type="submit" variant="primary">Submit</b-button> </b-form> </div> </div>

  ask by j0zeft translate from so

未解决问题?本站智能推荐:

3回复

如何在 Vue.js 中的方法内触发输入焦点事件?

我有一个使用以下事件的输入: 我如何在里面使用这个@focus="$event.target.select()"事件: 上述方法复制值。 我需要在用户点击复制时触发上面的选择焦点事件如何正确实现?
2回复

通过 this.$refs 从另一个 vue.js 组件调用方法

我有一个要触发的兄弟元素。 我试过这个解决方案 得到:未捕获的类型错误:this.$refs.fileUploader.click is not a function b文件文档
2回复

用于 bootstrap-vue 输入编号 Vue.js 的 MaxLength

我尝试为bootstrap-vue的输入实现maxLength ,但是从我从他们的文档中读到的内容,他们不支持 max. 如果我删除type="number" ,它可以工作,但不再是数字。
1回复

vue.js:如何在转义内容中转义变量

我正在使用 vue2,我需要在转义内容中转义一个变量。 听起来很奇怪,但这段代码会澄清(一行中的表格单元格): 我需要转义转义内容中的site变量。 我怎么做 ? 标准文档只涵盖简单的情况,这似乎更高级,也许(还)在 vue2 中不可能? 请帮忙 :) PS:使用类似的东西 不起作
1回复

在 b-form-select 中看不到 API 的值 - Vue.js

我使用 API 来获取用户。 我想将这些用户绑定到 b-form-select (bootstrap-vue)。 但是在请求之后,我在 b-form-select 中看到了“null”。 我的请求 和表格显示数据 但如果我使用 我看到我的用户。 为什么 bootstrap-vue 无法显
4回复

如何使用 Vue.js 在父组件中更新的子组件中的数据?

我的父组件如下所示: 我的子组件看起来像: 如果从父组件调用add方法,我希望它在子组件中选择数据 我该怎么做?
2回复

Bootstrap-vue - 如何以编程方式显示/隐藏 b 表列

我如何根据更改数据模型的某些事件在下面的 BootstrapVue b-table例中显示/隐藏列。
2回复

自定义 Bootstrap-Vue 复选框组件

我正在尝试制作组件以创建动态表单,但我在使用复选框时遇到问题 这是我调用代码的方式 问题是v-model内容不会改变,但它会改变输入字段。 怎么了? 有人能帮我吗? ps 我正在使用 bootstrap-vue 谢谢!