繁体   English   中英

是否有一种简单的方法可以使用 bootstrap 和 Vue.Js 触发表单验证 onSubmit 而不是 onLoad?

Is there a simple way to trigger form validation onSubmit instead of onLoad with bootstrap and Vue.Js?

提示:本站收集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">

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

1 个回复

在您的组件声明中,您设置了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>

1 使用 vue.js 触发表单验证按钮

我有 4 个不同的按钮,如果每个按钮都被点击,它需要向验证函数传递一个名称,以便我知道哪个按钮触发了事件。 我需要获取被点击的输入并为每个输入使用不同的逻辑。 所以我有这个函数,它被输入中的所有提交触发,但我无法获得每个的 v-model。 ...

4 寻找一种通过js验证表单的简单方法。

**嘿,刚接触javascript的人(也许一个月了),我遇到了麻烦。 我想通过js创建验证表单。 不知道我可以从哪里开始。 我曾考虑过禁用提交按钮,直到所有表格都填写完毕,但不确定如何执行。 任何帮助将不胜感激。 谢谢。 ** body { background: ...

5 riotjs触发表单onsubmit

所以我在RiotJS有一个简单的表格 当我通过按钮提交时,效果很好。 但是当我使用外部按钮触发表单的提交时 它不起作用,因为它不以某种方式不运行riotjs onsubmit函数,而是本地submit函数,这不是我想要的... 如何解决? ...

6 当拥有它的表单被激活/停用时,是否有一种简单的方法来调用框架中的方法?

这是关于Delphi和VCL。 我有几个框架可以用于多种形式,通常是在代码中创建并添加到表单中。 表单可能包含其中几个框架。 当包含它的表单被取消激活时,我需要在这些帧中执行一些代码,并在激活时将其反转。 一种解决方案是在那些调用框架方法的表单中使用FormActivate / ...

8 是否有一种简单的方法来触发QWidget子级的hoverenter / hoverleave事件?

为了实现样式,我试图使一组小部件中的所有小部件都采用某种特定的背景(如果指针进入了任何一个小部件)。 即,如果指针位于小部件A的包含矩形内部,则A和小部件B都应更改其背景。 同样,如果指针进入B,则A也应采用相同的背景。 如果指针同时在A和B之外,则背景自然应该回到非悬停背景。 QW ...

2018-03-02 09:40:58 1 90   c++/ qt
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM