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

    <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 谢谢！