Vue中怎么使用Validator表单验证插件

本文小编为大家详细介绍"Vue中怎么使用Validator表单验证插件"，内容详细，步骤清晰，细节处理妥当，希望这篇"Vue中怎么使用Validator表单验证插件"文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

基本使用

   
   
    username:       
   
    comment:       
   
    
请输入你的名字
    
您的评论太长了
   
     
 

将要验证的表单包裹在validator自定义元素指令中，而在要验证的表单控件元素的 v-validate 属性上绑定相应的校验规则。

验证结果会保存在组建实例的 $validation 属性下。 $validation 是由 validator 元素和 name 属性和 $ 前缀组件

验证结果结构

{ // 表单整体验证 "valid": false, // 字段校验是否通过  "invalid": true, // valid 取反 "touched": false, // 校验字段所在元素获得通过焦点时返回true，否则返回false "untouched": true, // touched 取反 "modified": false, // 当元素值与初始值不同时返回true，否则返回false "dirty": false, // 字段值改变过至少一次返回true，否则返回false  "pristine": true, // dirty 取反 // 字段单一验证 "username": {  "required": true,  "modified": false,  "pristine": true,  "dirty": false,  "untouched": true,   "touched": false,  "invalid": true,  "valid": false }, "comment": {  "maxlength": false,  "modified": false,  "pristine": true,  "dirty": false,  "untouched": true,  "touched": false,  "invalid": false,  "valid": true }}

校验结果由两部分组成。表单整体校验结果和单个字段校验结果。

验证器语法

v-validate 指令语法：

v-validate[:field]="array literal | object literfal | binding"

校验字段名field

field用来标识校验字段，之后可以用该字段来引用校验结果

v-validate 指令用来定义校验规则，其值可以是数组字面量，对象字面量，组件实例数组属性名。

数组字面量

当校验器不需要额外参数时，可以使用数组字面量形式，如 required 校验器，只要出现就带I表该校验器所在元素是必填项。

   
   Zip: 
   
    邮政编码是必填项   
  
 

对象字面量

对象字面量语法适合需要额外参数的校验器。如限制输入长度的校验器 minlength,需要说明限制长度多少。

   
   ID:    
   
    
ID不能为空
    
你的ID名字太短
    
你的ID名字太长
   
     
 

还可以用 对象字面量语法通过 rule 字段来自定义验证规则

   
   ID:    
   
    
ID不能为空
    
你的ID名字太短
    
你的ID名字太长
   
     
 

实例数据属性

v-validate 的值可以是组建实例的数据属性。这样可以用来动态绑定校验规则。

  
  ID: 
  
   
不能为空
   
你的ID太短
   
你的ID太长
  
 
 

内置校验规则

vue-validator 内置一些常用的验证规则：

• required - 输入值不能为空

• pattern - 必须匹配pattern表示的正则表达式

• minlength - 输入值长度不能小于minlength表示的值

• maxlength - 输入的值不能大于maxlength表示的值

• min - 输入值不能小于min表示的值

• max - 输入值不能大于max表示的值

与v-model同时使用

vue-validator会自动校验通过v-model动态设置的值。

   
   message:    
   
message不能为空
   
message输入太长位数
  
 

重置校验结果

通过在Vue组件实例上调用$resetValidation();方法来动态重置校验结果。

   
   
    username:       
   
    comment:       
   
    
用户名不能为空
    
输入文字超过256个
        Reset Validation   
   
{{$validation | json}}
  
 

复选框checkbox

   
   
调查
   
        
请选择水果
             Apple        Orange        Grape        Banana        
     
      
{{msg | json}}
     
    
   
  
 

下拉类表select

    
       请选择语言    javascript    php    node      
    
不能为空！
   
  
  

校验状态class

各校验状态都有其对应的class(默认) 也可以自定义校验状态class

 username <

分组校验

vue-validator支持分组校验。例如重复密码功能。

   
   username: 
   password: 
   comfirm password:    
    
用户名不能为空
    
密码不能为空
    
密码不能少于8位
    
重复密码不能为空
    
密码不能少于8位
    
密码不一致
   
  
 

读到这里，这篇"Vue中怎么使用Validator表单验证插件"文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注行业资讯频道。