提示:本站收集StackOverFlow近2千万问答，支持中英文搜索，鼠标放在语句上弹窗显示对应的参考中文或英文， 本站还提供 中文繁体 英文版本 中英对照 版本，有任何建议请联系yoyou2525@163.com。
我有一个最初为空的密码重置表单，我想在提交时验证没有任何字段为空。 我正在为每个字段执行以下操作：
<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">
问题是，每当我导航到该页面时，默认情况下所有字段都被标记为无效并显示它们的错误消息，因为它们是空的。 我希望在提交表单时进行验证。 有没有一种简单的方法可以做到这一点而无需安装额外的验证插件？
在您的组件声明中，您设置了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>
声明：本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.