介绍

例如，在后端项目中，我们的Laravel框架有自己的表单验证验证机制，他将验证集成到FormRequest中

我们只需要依赖在我们的方法中注入到我们自己的实例化中的验证类，当然，我们也可以在我们的方法中直接验证表单数据

在我们的前端项目中，也就是在我们的vue项目中，也有一个比较好的验证解决方案，就是这里的vuelidate

1.装置

当我们安装前端包时，在项目终端执行：

$ npm install vuelidate - save安装完成后，在main.js中引入并声明这个package:就像我们使用vuex一样。

从‘vue’中导入vue从‘vuelidate’中导入vuelidate . vue . use(vuelidate)当然，在需要验证的组件中也可以参考相对较小的版本：

从“vuelidate”varcomponent=vue . extend({ mixin :[validation mixin]，validation : }导入{validationmixin}.}})如果你比较喜欢require的形式，也可以这样介绍：

Const {validationmixin，default : vuelidate }=require(' vuelidate ')const { required，min length }=require(' vuelidate/lib/validators ')2。使用

其实用起来真的很方便。以下示例是我的项目中的用法

1.注册验证

注册用户时，我们通常需要处理的表单字段有姓名、电子邮件、密码、confirm _ pwd

首先，我在组件文件Register.vue中编写了基本的样式结构，这取决于每个人

然后我们验证表单数据：

这是用户名和邮箱的验证。如前所述，我们首先介绍我们的验证规则：

从“vuelidate/lib/validators”导入{required，minlength，between，email}因为我注册了一个新用户，我定义了一个数据

data(){ return { new user : { name : ' '，email: ' '，password: ' '，confirm _ pwd:''}，}，然后转到定义我们的验证字段规则3360。

验证： { new user : { name : { required，minlength : minlength (2)}，email3360 {required，email}}}在定义了这些验证规则之后，下面是我的html内容。

div class=' control-group ' v-bind : class=' { ' form-group-error ' : $ v . new user . name . $ error } ' label class=' control-label '用户名/Labelel-输入占位符='请输入您的用户名' v-model . trim=' new user . name ' @ input=' $ v . new user . name . $ touch()'/El-input/div span class=' form-group _ _ message ' v-if='！$v.newUser.name.required '用户名不能为空/span span class=' form-group _ _ message ' v-if='！$v.newUser.name.minLength '用户名不能太短/span div class=' control-group ' v-bind : class=' { ' form-group-error ' : $ v . new user . email . $ error } Label class=' control-Label '邮箱/Label le-输入占位符='请输入您的邮箱' v-model . trim=' new user . email ' @ input=' $ v . new user . email . $ touch()'/El-input/div span class=' form-group请填写正确的电子邮件格式/span每个人都可以不同。官方文件中也给出了demo:

div class=' form-group ' v-bind : class=' { ' form-group-error ' : $ v . flatA . $ error } ' label class=' form _ _ label ' flat A/label input class=' form _ _ input ' v-model . trim=' flatA ' @ input=' $ v . flatA . $ touch()'/div span class=' form-group _ _ message ' v-if='！“$v.flatA.required”字段为必填字段。/span div class=' form-group ' v-bind : class=' { ' form-group-error ' : $ v . flat . $ error } ' label class=' form _ _ label ' flat B/label input class=' form _ _ input ' v-model . trim=' flat ' @ input=' $ v . flat . $ touch()'/div span class=' form-group _ _ message ' v-if='！“$ v . flat . required”字段为必填字段。/span div class=' form-group ' v-bind : class=' { ' form-group-error ' : $ v . for GrouP . nested . $ error } ' label class=' form _ _ label ' nested field/label input class=' form _ _ input ' v-model . trim=' for GrouP . nested ' @ input=' $ v . for GrouP . nested . $ touch()'/div span class=' form-group _ _ message ' v-if='！$v.forGroup.nested.required '字段是必需的。/span Div class=' form-group ' v-bind : class=' { ' form-group-error ' : $ v . validation group . $ error } '/Div span class=' form-group _ _ message ' v-if=' $ v . validation group . $ error ' group无效。/span prevalization group : { { $ v . validation group } }/pre/div我们举一个这样的例子。值得注意的是，我们需要知道他$ v.name的内容。

也就是说，$无效$脏$错误$待定$各$个

特别注意$error中的解释：它是$invalid $dirty的简写

也就是和的组合，您可以尝试更改两者的值，然后查看$error的值

当然有两个重要的方法： $touch $reset。上面也有例子。简单的一点是将这个和子节点的$dirty设置为true或false

将此$dirty与$invalid组合设置可以判断验证是否成功

$error由$dirty和$invalid确定

这里的验证规则流程如下：如果$error为真，那么表单组将添加一类表单组错误

只有当$error为真时，如果您不满足任何验证规则，如必需，您将被提示验证失败

如果验证错误，则给出错误提示。这是我的错误风格：form-group _ _ message { display : none；font-size : 95 rem；color: # CC3333左边距： 10毫米；边距-bottom : 12px；}.表单组错误。form-group _ _ message { display : }块；color: # CC3333}.表单组错误输入，表单组错误输入：焦点。表单组错误输入：hover，表单-组-错误文本区域{ border-color : # cc 3333；}2.密码验证

密码验证实际上与上面类似，只是他的验证规则由sameAs验证

3.组合验证

除了上面的，还有一个组合验证，就是任何一个不符合验证规则的，都不会通过这个，挺常见的

我们可以像这样在验证字段中组合：

validations: { flatA: {必需}，flat : {必需}，forGroup: { nested: {必需} }，validationGroup: ['flatA '，flat '，' forGroup.nested']}如果其中一个是FlatA flatB forGroup，而其中一个不符合验证规则，则$v.validationGroup.$error为false

4.异步验证

尤其是在验证唯一性的时候，我们肯定会遇到这样的场景：

例如，如果我们的电子邮件已经注册了此电子邮件，那么它显然不是我们想要用此电子邮件注册的

此外，当我们登录时，我们需要检查用户的密码

我这里举的例子是，如果用户名注册了，它会提示已经注册了

完全支持异步/等待语法。结合Fetch API也很好，可以根据后端API提供的结果来判断，可以增加我们的唯一性验证：

name: {必需，minLength: minLength(4)，async isUnique(值){ if(值==' ')返回true const response=wait fetch(` http://localhost 33608000/API/unique/name/$ { value } `)返回boolean (awaitresponse。JSON ())}}，这里我在本地测试Laravel作为后端提供的数据，然后在实际项目中与数据库结合

//用户身份验证路由route:group (['前缀'=' unique '，'中间件'=['API '，' CORS'])，function(){ route :3360 get('/name/{ value } '，function(Request $request，$ value){ if($ value==' Gavin '){ return response()-JSON(false)；}返回响应()-JSON(true)；});});如果我们注册gavin，用户会提示昵称已经注册，因为我在用户名中添加了isUnique验证

复制代码如下： span class=' form-group _ _ message ' v-if='！$v.newUser.name.isUnique '用户名已经注册/span

显示屏应该是这样的：

5.自定义验证

同样，我们不仅可以使用它提供给我们的验证规则，还可以定制验证规则并将其与之前的规则相结合

这位官员举了一个简单的例子：

导出默认值={ if (Array.isArray(value))返回！value.length返回值===undefined || value===null？假：字符串(值)。length}是本文的全部内容。希望对大家的学习有帮助，支持我们。