vue.js表单验证插件(vee-validate)的使用教程详解

 <!-- unpkg -->
 <script src="/UploadFiles/2021-04-02/vee-validate@2.0.0-rc.7">



引入项目


单页引入




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


浏览器引入




 <script src="/UploadFiles/2021-04-02/vue.js">



基础使用




<div class="column is-12">
 <label class="label" for="email">Email</label>
 <p :class="{ 'control': true }">
 <input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email">
 <span v-show="errors.has('email')" class="help is-danger"></span>
 </p>
</div>




代码解析




  
    
      v-validate=”‘required
      email'”
    
  




v-validate 是由该插件提供的指令 作用于html上


  
    
      “‘required
      email'” 字段验证的规则，注意双引号之内必须有单引号，多个规则之间用
      连接
    
  



errors.first(‘email') email字段验证不通过时显示相关联的提示信息

验证规则


地址
进一步学习



本地化


使用本地化功能可以让错误提示换成中文


单页中使用


浏览器中使用





var dict = {
 zh_CN: {
 messages: {
 required: function(field){
 return '请输入' + field ;
 },
 confirmed: function(field) {
 return '两次输入的密码不一致';
 }
 },
 attributes: {
 OldPassword: '旧密码',
 NewPassword: '新密码',
 ConfirmNewPassword: '确认密码',
 }
 }
};
VeeValidate.Validator.localize('zh_CN', dict.zh_CN);
Vue.use(VeeValidate);
var app = new Vue({
// 省略
});




代码解析


VeeValidate（浏览器引入js后建立了一个全局对象）
dict 翻译的内容，其中attributes对象表示字段，messages对象表示提示信息
本地化进一步参考
常用方法


出错渲染
字段验证不通过时渲染提示信息时使用


errors.first(‘field') 显示字段field的第一个出错信息
errors.collect(‘field') 显示字段field的所有出错信息
errors.has(‘field') 判断fileds字段是否检验有误
erros.all() 显示所有的出错信息
errors.any() 判断是否有错误


手动检验
常用于数据提交（写在vue的方法内部）


this.$validator.validate(‘field'); 校验单个字段
this.$validator.validateAll(); 表单整体校验


代码片段


 this.$validator.validateAll().then(function(result) {
  if (result) {
  //成功操作
  } else {
  // 失败操作
  }
 })


检验信息清除
常用于校验成功后清除错误的提示信息


this.errors.clear();
API进一步学习
总结
以上所述是小编给大家介绍的vue.js表单验证插件(vee-validate)的使用教程详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！