vee-validate 这个插件怎么判断字段验证失败,就不能执行提交

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vee-validate 这个插件怎么判断字段验证失败,就不能执行提交相关的知识,希望对你有一定的参考价值。

用$("#jsForm")[0].submit()

试试,我想有可能是出现重复ID的情况,具体要检查页面

有可能是你导入模板引擎的时候没有注意导入了多个表单
参考技术A 提交的方法里
this.$validator.validate().then(result =>
if (!result)
// do stuff if not valid.

)

vuejs 使用 vee-validate 进行表单验证

如果你使用 Laravel 加 Vuejs 技术栈来开发 Web 应用的话,其实你会发现,这两个框架直接有很多思想相通的地方,比如本文要介绍的这个表单验证组件 vee-validate ,这个组件总结为一句话就是:在前端验证里面实现了 laravel 的表单验证,这种实现是指,语法和思想的实现。我们看看

安装 vee-validate

直接可以使用 npm 来安装:

npm install vee-validate --save

使用

很简单的,在 Laravel 项目的 resources/assets/js/app.js 中添加:

import Vue from 'vue';
import VeeValidate from 'vee-validate'; Vue.use(VeeValidate);

在组件的表单中使用:

<input 
v-validate="'required|email'" 
type="text" 
name="email">

你看,这写法跟 laravel 的验证是不是一模一样?或者你也可以这样:

<input 
v-validate="{ rules: { required: true, email: true } }"
type="text"
name="email">

再或者,你可以这样:

<input 
type="text" 
name="email" 
v-validate.initial="'required|email'" 
:class="{'form-control': true, 'is-danger': errors.has('email') }" 
placeholder="Email" />

这个例子注意的是,我们通过 :class 绑定 css 的类,里面使用了 errors.has('email') 来判断 email 验证是否通过。这里能直接使用 errors 来判断就是因为我们在 app.js 添加Vue.use(VeeValidate)

如何获取错误提示

Easy ! 就像 laravel 那样:

<div v-show="errors.has('email')"
 class="help is-danger">
{{ errors.first('email') }}
</div>

有没有很像!直接 errors.first('email') 就可以获取到 email 验证的错误信息,而且这个验证信息的显示与否都是实时的!

最后

写这个主要是因为我最近在升级 Laravist ,全面改版之后使用了很多 Vuejs 来重写,其中就有用到 vee-validate 来做验证。使用感觉非常不错,就此推荐一波。


以上是关于vee-validate 这个插件怎么判断字段验证失败,就不能执行提交的主要内容,如果未能解决你的问题,请参考以下文章

vue-router练习,vee-validate(一个验证vue插件)

Vee-Validate 验证组

vee-validate 引用js文件可以直接使用吗

vue表单验证,vee-Validate

Vee-Validate 自定义日期验证

Vee-validate vue 3 setErrors 无法定义字段