新网创想网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

Vue中如何使用Validator表单验证插件-创新互联

这期内容当中小编将会给大家带来有关Vue中如何使用Validator表单验证插件,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:空间域名、雅安服务器托管、营销软件、网站建设、贡井网站维护、网站推广。

基本使用


 
  
   
    username:
    
   
        comment:         
        请输入你的名字

    您的评论太长了

   
        
 new Vue({   el: '#app'  });

将要验证的表单包裹在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太长

  
     new Vue({   el: '#app',   data: {    rules: {     required: true,     minlength: 3,     maxlength: 16    }   }  });  

内置校验规则

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

  • required — 输入值不能为空

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

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

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

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

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

与v-model同时使用

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


 
  
   message: 
   
   message不能为空

   message输入太长位数

      var vm = new Vue({   el: '#app',   data: {    msg: ''   }  });    setTimeout(function () {   vm.msg = 'hello world!';  }, 2000);  

重置校验结果

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


 
  
   
    username:
    
   
   
    comment:
    
   
   
    用户名不能为空

    输入文字超过256个

         Reset Validation        
{{$validation | json}}
        new Vue({   el: '#app',   methods: {    onReset: function () {     this.$resetValidation();    }   }  });  

复选框checkbox


 
  
   

调查

   
         请选择水果                Apple          Orange          Grape          Banana                       

{{msg | json}}

              
        new Vue({   el: '#app',   computed: {    requiredErrorMsg: function () {     return '请选择水果';    },    minlengthErrorMsg: function () {     return '请选择至少1个水果!';    },    maxlengthErrorMsg: function () {     return '请选择最多2个水果!';    }   }  });  

下拉类表select


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

              new Vue({   el: '#app'  });  

校验状态class

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


 username
 <

分组校验

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


 
  
   username: 
   password: 
   comfirm password: 
   
    用户名不能为空

    密码不能为空

    密码不能少于8位

    重复密码不能为空

    密码不能少于8位

    密码不一致

            new Vue({   el: '#app'  });  

上述就是小编为大家分享的Vue中如何使用Validator表单验证插件了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联网站建设公司行业资讯频道。

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章标题:Vue中如何使用Validator表单验证插件-创新互联
网站URL:http://www.wjwzjz.com/article/csesis.html