Vue 验证框架 Vee基本使用与服务端集成

太过爱你忘了你带给我的痛 2022-05-16 13:47 322阅读 0赞

# 验证框架 Vee-validate #

官网: [https://baianat.github.io/vee-validate/][https_baianat.github.io_vee-validate]

# 安装 #

# install with npm
    npm install vee-validate
    
    # install with yarn
    yarn add vee-validate

# 基本使用 #

main.js 加入 VeeValidate 模块

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

## 验证与错误信息 ##

<input type="username" v-validate="{required:true}" class="form-control" name="username" v-model="username" > <span class="errorHint">{ { errors.first("username")}}</span>

效果: 当节点`input[name='username']` 为空时提示`"The username field is required."`

1.  根据input标签的name属性绑定,(name属性**必须存在**)
2.  v-validate 指定验证规则,(v-validate标签**必须存在**)
3.  errors.first(“username”) 获取name=”username”标签的错误信息显示在界面

验证规则:

<table> 
 <tbody> 
  <tr> 
   <td>key</td> 
   <td>参数</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>required</td> 
   <td>true|false</td> 
   <td>字段是否必须填写</td> 
  </tr> 
  <tr> 
   <td>is</td> 
   <td>目标字段对象</td> 
   <td>当前字段与目标字段值是否相等</td> 
  </tr> 
  <tr> 
   <td>email</td> 
   <td>邮箱</td> 
   <td>验证邮箱格式</td> 
  </tr> 
  <tr> 
   <td>date_format</td> 
   <td>日期</td> 
   <td>验证日期格式</td> 
  </tr> 
  <tr> 
   <td>length</td> 
   <td>字符串</td> 
   <td>长度必须等于XX</td> 
  </tr> 
  <tr> 
   <td>min</td> 
   <td>字符串</td> 
   <td>最小长度</td> 
  </tr> 
  <tr> 
   <td>max</td> 
   <td>字符串</td> 
   <td>最大长度</td> 
  </tr> 
  <tr> 
   <td>min_value</td> 
   <td>数字</td> 
   <td>最小值</td> 
  </tr> 
  <tr> 
   <td>max_value</td> 
   <td>数字</td> 
   <td>最大值</td> 
  </tr> 
  <tr> 
   <td>regex</td> 
   <td>正则表达式字符串</td> 
   <td>当前字段的值是否能通过正则验证</td> 
  </tr> 
 </tbody> 
</table>

更多验证规则参见官网: [https://baianat.github.io/vee-validate/guide/rules.html\#after][https_baianat.github.io_vee-validate_guide_rules.html_after]

# 与服务端的验证信息集成 #

本节阐述如何在http请求时,对返回的内容进行处理。 属于原理内容

服务端错误

{
      "success": 30,
      "message": "验证信息错误",
      "data": { "password": "密码不能为空", "username": "用户名不能为空" } }

客户端请求示例:

httputil.post('/api/login/account',{username:this.username,password:this.password},{validate:{error:this.errors,validator:this.$validator}}).then((res) =>{ // 客户端对服务端返回对象的<<data对象>>的处理 })

加入两个参数:`{validate:{error:this.errors,validator:this.$validator}}`  
1. this.errors 用于添加服务端返回的异常  
2. this.$validator 用于`验证请求字段` 以及 `找到服务端返回的字段对应本地字段的id`

# 分组验证 #

客户端请求

// manager 组
    <input type="text" class="form-control"  v-validate="{required:'手机'}" data-vv-scope="manager" name="phone"  v-model="changeManager.phone">
    <span class="errorHint">{
       {errors.first("phone","manager")}}</span>
    
    //password组
    <input type="password" v-validate="{required:'原密码'}"  data-vv-scope="password"  class="form-control" name="password" v-model="password"/>
    <span class="errorHint">{
       {errors.first("password","password")}}</span>

与基本使用的区别如下  
1. 通过 `data-vv-scope` 指定验证分组  
2. errors.first(nane字段,分组)

# 中文错误信息 #

import cn from 'vee-validate/dist/locale/zh_CN';
    import VeeValidate, { Validator } from 'vee-validate';
    
    Validator.localize('cn', cn);

通过 Validator.localize 指定语言会覆盖默认的报错信息

# 自定义错误信息 #

在main.js 中 自定义错误信息

// 修改默认错误信息
    const dict = {
      cn: {messages: {
          is: (name,param) =>{
            if(param === null || param === undefined || param.length===0){
              throw "验证字段的别名不存在:"+name;
            }
            return param[1];
          }
      }}  // name接受alias的值.
    }
    Validator.localize(dict);

dict 对象说明:  
1. cn 指定语言是中文  
2. cn.messages 覆盖消息  
3. cn.messages.is 当指定验证规则`v-validate="{ is: confirmation }"` 时, password和password\_confirmation标签的内容不一致时,返回错误`is的自定义错误信息`

is 标签:

## 错误信息覆盖形式: ##

例如

Validator.localize('cn', cn);
    Validator.localize(dict);

1.  dict 最后指定的优先级最高
2.  cn 第二优先级,覆盖en指定的部分内容.没有全部覆盖
3.  en 默认错误语言

# 附注 #

http.js 请求封装

import Vue from 'vue'
    
    import api from '../../config/api'
    
    import router from '../router'
    // 中断信号类
    class HttpBreakPromise{ 
      constructor(){}
    }
    
    //删除undifined对象
    function deleteEmptyProperty(object){
      for (var i in object) {
        var value = object[i];
        if (typeof value === 'object') {
          if (Array.isArray(value)) {
            if (value.length == 0) {
              delete object[i];
              continue;
            }
          }
          deleteEmptyProperty(value);
          if (isEmpty(value)) {
            delete object[i];
          }
        } else {
          if (value === '' || value === null || value === undefined) {
            delete object[i];
          } else {
          }
        }
      }
    }
    function isEmpty(object) {
      for (let name in object) {
        return false;
      }
      return true;
    }
    
    // 客户端本地验证
    const validateSimpleFilter = (info)=> {
      if(!info || !info.validate){
        return Promise.resolve();
      }
      let validator = info.validate.validator;
      let errors = info.validate.error;
      let scope = info.validate.scope;
    
      scope = scope ? scope + ".*" : '*';
      return validator.validate(scope).then((descriptor, value, options) => { if (!descriptor) { throw "验证错误"; } }) } // 服务端返回内容验证 const validateFilter = (promise,info)=>{
      if(!info || !info.validate){
        return promise;
      }
        let validator = info.validate.validator;
        let errors = info.validate.error;
        let scope = info.validate.scope;
    
        scope = scope?scope+".*":'*';
        return validator.validate(scope).then((descriptor, value, options)=>{ if(!descriptor){ throw "验证错误"; } }).then(()=>{ mask(promise,info); return promise.then(res=>{ if(res.success !== 30){ // 只针对状态码为30的，进行错误值绑定 return res; } let resData = res.data; errors.clear(); let fields = validator.fields; for(let eIndex in resData){ let findItem = fields.find({name:eIndex}); let errorObj = { field: eIndex, msg: resData[eIndex], id: findItem.id }; errors.add(errorObj) } return res; }); }) } // 请求处理器 const requestHandler=(promise,info)=>{
      // 添加遮罩
      mask(promise,info);
      //服务端返回验证
      validateFilter(promise,info)
      //登录过滤器
      loginFilter(promise,info);
      // 返回值 处理
      return resultFilter(promise,info);
    
    }
    
    
    // 遮罩
    const mask = (promise,info)=>{
      var index = layer.load(2, {
       content:'加载中...',success: function(layero){
          layero.find('.layui-layer-content').css({
       'padding-top':'50px',"text-align":"center","width":"100px","background-position": "34px 12px","background-color": "white","box-shadow": "0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12)","border-radius": "6px","height":"85px"});
        }
      })
        return promise.then(res=>{
    
          //获得结果后,弹出遮罩
          let toast = info ? info.toast:{};
          let result = res.body;
          if (result.success === 20) {
            if(toast&&toast.success){
              layer.msg(toast.success, {
                icon: 1,
                shade: 0.2,
                scrollbar: false,
                shadeClose:true
              });
            }
          }else{
            if(toast&&toast.fail){
              layer.msg(toast.fail, {
                icon: 2,
                shade: 0.2,
                scrollbar: false,
                shadeClose:true
              });
            }
          }
          //获得结果后,删除遮罩
          layer.closeAll('loading')
    
        })
    
    }
    // 返回值过滤器
    const resultFilter = (promise,info) => {
        return promise.then(res => {
          let result = res.body;
          if(result.success!==20){
            throw new HttpBreakPromise();
            // Promise.break;  ES6 原生 不提供 Promise.break; 形式中断promise调用链。
            // 只能抛出异常,在调用者那边处理异常
          }
          if(info && info.allObj){
            return result;
          }
          return result.data
        }).catch((err)=>{ //加入HTTP调试错误 console.log("http调试错误:",err); return new Promise((resolve, reject)=>{}); }); } const loginFilter = (promise,info)=>{
      return promise.then(function(response){
        layer.closeAll('loading')
        let success = response.body.success;
        if(success===900){
          layer.msg("登录已过期", {
            icon: 2,
            shade: 0.2,
            scrollbar: false,
            shadeClose:true,
            time:2000
          })
          router.push('/');
          return response;
        }
        var errorType=info&&info.error;
        if(errorType && success!==20){
          router.push('/error/error');
        }
        return response;
      })
    }
    
    const info= {toast :{},allObj:false,page:{}}
    const httputil = {
        name:"httputil",
      get(url = {},params = {},info = info) {
    
        if(info&&info.page){
          params = $.extend({},{
       currentPage:info.page.currentPage,showCount:info.page.showCount},params);
        }
    
       // delete info.error
        deleteEmptyProperty(params);
        return validateSimpleFilter(info).then(()=>{ return requestHandler(Vue.http.get(api.BASE_URL + url,{params:params,withCredentials: true}), info); }); }, post(url = {}, params = {},info= info) { return validateSimpleFilter(info).then(()=>{ return requestHandler(Vue.http.post(api.BASE_URL + url, params,{withCredentials: true}) ,info); }) }, put(url = {}, params = {},info= info) { return validateSimpleFilter(info).then(()=>{ return requestHandler( Vue.http.put(api.BASE_URL + url, params, {withCredentials: true}) ,info); }) }, delete(url = {}, params = {},info= info) { return validateSimpleFilter(info).then(()=>{ return requestHandler( Vue.http.delete(api.BASE_URL + url, {body:params},{withCredentials: true}) ,info); }) }, } export default httputil;

[https_baianat.github.io_vee-validate]: https://baianat.github.io/vee-validate/
[https_baianat.github.io_vee-validate_guide_rules.html_after]: https://baianat.github.io/vee-validate/guide/rules.html#after