李冰

李冰 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

李冰 赞了文章 · 2019-01-15

VeeValidate 的使用场景以及配置

创建vue项目:

vue init webpack vee

cd ./vee 

npm run dev
 
# or
yarn run dev

安装 VeeValidate

npm install vee-validate --save
# or
yarn add  vee-validate --save

本文中使用的 VeeValidate 版本为 2.1.5

App.vue 中引入

import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

例子

第一个测试例子

<template>
  <div class="test1">
    <div>
      <input
        type="text"
        name="nickname"
        v-model="formData.nickname"
        v-validate="'required|min:3|max:10'"
      >
      <p>{{errors.first('nickname')}}</p>
    </div>
    <div>
      <button @click="handleSubmit">Submit</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "test1",
    data() {
      return {
        formData: {
          nickname: '',
          password: '',
        }
      }
    },
    methods: {
      handleSubmit() {
        this.$validator.validate()
          .then((valid) => {
            if (true === valid) {
              console.log('验证通过');
            } else {
              console.log(this.$validator.errors.all());
            }
          })
      }
    }
  }
</script>

<style scoped lang="css">
  .test1 {
    width: 900px;
    margin: 0 auto;
  }
</style>

更多配置请参考官网!
我们只是用些常用配置和常用的验证!

中文配置

全局配置

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

这样就可以使用中文提示了!

自定义错误提示

<template>
  <div class="test2">
    <div><input type="text" v-model="formData.nickname" data-vv-name="nickname" v-validate="'required|min:3|max:10'">
    </div>
    <div>{{errors.first('nickname')}}</div>
    <div><input type="text" v-model="formData.password" data-vv-name="password" v-validate="'required|min:5|max:200'">
    </div>
    <div>{{errors.first('password')}}</div>
    <div>
      <button @click="handleSubmit">Submit</button>
    </div>
  </div>
</template>

<script>
  const validate = {
    custom: {
      nickname: {
        required: () => '昵称不得为空', //写法1
        min: "昵称不得小于3个字符", //写法2
        max: () => '昵称不得大于10个字符'
      },
      password: {
        required: () => '密码不得为空',
        min: "密码不得小于5个字符",
        max: () => '密码不得大于200个字符'
      }
    },
  };

  export default {
    name: "test2",
    data() {
      return {
        formData: {
          nickname: '',
          password: '',
        }
      }
    },
    methods: {
      handleSubmit() {
        this.$validator.validate()
          .then((valid) => {
            if (true === valid) {
              console.log('验证通过');
            } else {
              console.log(this.$validator.errors.all());
            }
          })
      }
    },
    mounted() {
      this.$validator.localize('zh_CN', validate);
    }
  }
</script>

自定义验证规则

<template>
  <div class="test2">
    <div><input type="text" v-model="formData.nickname" data-vv-name="nickname" v-validate="'required|min:3|max:10'">
    </div>
    <div>{{errors.first('nickname')}}</div>
    <div><input type="text" v-model="formData.password" data-vv-name="password" v-validate="'required|min:5|max:200'">
    </div>
    <div>{{errors.first('password')}}</div>
    <div><input type="text" v-model="formData.re_password" data-vv-name="re_password"
                v-validate="'required|confirm'">
    </div>
    <div>{{errors.first('re_password')}}</div>
    <div><input type="text" v-model="formData.mobile" data-vv-name="mobile" v-validate="'required|mobile'">
    </div>
    <div>{{errors.first('mobile')}}</div>
    <div>
      <button @click="handleSubmit">Submit</button>
    </div>
  </div>
</template>

<script>
  const validate = {
    custom: {
      nickname: {
        required: () => '昵称不得为空', //写法1
        min: "昵称不得小于3个字符", //写法2
        max: () => '昵称不得大于10个字符'
      },
      password: {
        required: () => '密码不得为空',
        min: "密码不得小于5个字符",
        max: () => '密码不得大于200个字符'
      },
      re_password: {
        required: () => '请再次输入密码!',
      },
      mobile: {
        required: () => '请输入手机号码!',
      }
    },
  };

  export default {
    name: "test3",
    data() {
      return {
        formData: {
          nickname: '',
          password: '',
          re_password: '',
          mobile: ''
        }
      }
    },
    methods: {
      handleSubmit() {
        this.$validator.validate()
          .then((valid) => {
            if (true === valid) {
              console.log('验证通过');
            } else {
              console.log(this.$validator.errors.all());
            }
          })
      }
    },
    mounted() {
      this.$validator.localize('zh_CN', validate);
      this.$validator.extend('mobile', {
        getMessage: field => '手机号有误',
        validate: value => {
          return /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
        }
      })
      this.$validator.extend('confirm', {
        getMessage: field => '两次密码输入不一致',
        validate: value => {
          return value === this.formData.password
        }
      })
    }
  }
</script>

显示第一个错误!

有时候我们需要在弹出层中提示用户 所以要显示第一个错误

this.$validator.errors.items[0].msg

例子 发验证码和注册!

这个例子中发验证码是一个验证 注册又是一个验证 所以有点意义!
在发送验证码的时候需要验证手机号码和图形验证码 注册的时候需要验证除图形验证码之外的数据
图片描述

图片描述

template

<template>
  <div class="reg">
    <div class="form_item">
      <div class="input">
        <input
          type="text"
          name="mobile"
          data-vv-name="mobile"
          v-model="mobile"
          v-validate="'required|mobile'"
          placeholder="手机号码"
        >
      </div>
      <div class="err">{{errors.first('mobile')}}</div>
    </div>
    <div class="form_item">
      <div class="input">
        <input
          type="text"
          v-model="img_captcha"
          name="img_captcha"
          placeholder="图形验证码"
          v-validate="'required'"
        >
      </div>
      <div class="err">{{errors.first('img_captcha')}}</div>
    </div>
    <div class="form_item">
      <div class="input send_sms">
        <input
          type="text"
          v-validate="'required|length:6'"
          v-model="sms_captcha"
          name="sms_captcha"
          placeholder="短信验证码"
        >
        <button class="send_sms_btn" @click="handleSendSms">获取验证码</button>
      </div>
      <div class="err">{{errors.first('sms_captcha')}}</div>
    </div>
    <div class="form_item">
      <div class="input">
        <input
          type="text"
          name="password"
          v-validate="'required|min:8'"
          v-model="password"
          placeholder="登录密码"
          ref="password"
        >
      </div>
      <div class="err">{{errors.first('password')}}</div>
    </div>
    <div class="form_item">
      <div class="input">
        <input
          type="text"
          name="re_password"
          v-validate="'required|confirmed:password'"
          v-model="re_password"
          placeholder="再次输入登录密码"
        ></div>
      <div class="err">{{errors.first('re_password')}}</div>
    </div>
    <div class="form_item">
      <div class="input">
        <input
          type="text"
          name="nickname"
          v-validate="'required|min:3|max:10'"
          v-model="nickname"
          placeholder="请输入昵称"
        ></div>
      <div class="err">{{errors.first('nickname')}}</div>
    </div>
    <div class="form_item">
      <div class="input">
        <input
          type="text"
          name="id_card"
          v-validate="'required|id_card'"
          v-model="id_card"
          placeholder="请输入身份证号码"
        ></div>
      <div class="err">{{errors.first('id_card')}}</div>
    </div>
    <div class="form_item">
      <div class="input">
        <input
          type="date"
          name="birthday"
          v-validate="'required|date_format:YYYY-MM-DD'"
          v-model="birthday"
          placeholder="请输入生日"
        ></div>
      <div class="err">{{errors.first('birthday')}}</div>
    </div>
    <div class="form_item">
      <div class="input">
        <input
          type="text"
          name="url"
          v-validate="'required|url'"
          v-model="url"
          placeholder="请输入个人网址"
        ></div>
      <div class="err">{{errors.first('url')}}</div>
    </div>
    <div class="form_item">
      <div class="input">
        <input
          type="text"
          name="email"
          v-validate="'required|email'"
          v-model="email"
          placeholder="请输入电子邮箱"
        ></div>
      <div class="err">{{errors.first('email')}}</div>
    </div>
    <div class="form_item">
      <div class="input">
        <input
          type="text"
          name="age"
          v-validate="'required|between:18,60'"
          v-model="age"
          placeholder="请输入年龄"
        ></div>
      <div class="err">{{errors.first('age')}}</div>
    </div>
    <div class="form_item">
      <button class="reg_btn" @click="handleSubmit">注册</button>
    </div>

  </div>
</template>

style 代码(这个是随便写的 原生css大家不要吐槽哈)

<style>
  .err {
    color: red;
    font-size: 12px;
    text-align: left;
  }

  .reg {
    width: 500px;
    margin: 0 auto;
  }

  .send_sms {
    position: relative;
  }

  .send_sms_btn {
    position: absolute;
    width: 100px;
    height: 30px;
    right: -11px;
    top: 2px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    background-color: #e4393c;
    outline: none;
    color: #fff;
  }

  .form_item {
    margin-bottom: 10px;
    width: 400px;
  }

  input {
    width: 400px;
    height: 30px;
    border: 1px solid #999;
    border-radius: 4px;
    outline: none;
    padding-left: 10px;
  }

  .reg_btn {
    width: 100px;
    height: 30px;
    border: none;
    border-radius: 4px;
    background-color: #e4393c;
    outline: none;
    cursor: pointer;
    color: #fff;
  }
</style>

js

<script>
  import {messages} from '../validate/reg'

  export default {
    name: "reg",
    data() {
      return {
        url: '',
        age: '',
        email: '',
        birthday: '',
        id_card: '',
        nickname: '',
        mobile: '',
        img_captcha: '',
        sms_captcha: '',
        password: '',
        re_password: '',
      }
    },
    mounted() {
      this.$validator.localize('zh_CN', messages);
      this.$validator.extend('mobile', {
        getMessage: field => '手机号有误',
        validate: value => {
          return /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
        }
      });
      this.$validator.extend('id_card', {
        getMessage: field => '身份证号码格式有误',
        validate: value => {
          return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)
        }
      });
    },
    methods: {
      handleSubmit() {
        this.$validator.errors.clear();
        this.$validator.validateAll({
          mobile: this.mobile,
          password: this.password,
          sms_captcha: this.sms_captcha,
          re_password: this.re_password,
          url: this.url,
          age: this.age,
          email: this.email,
          birthday: this.birthday,
          id_card: this.id_card,
          nickname: this.nickname,
        }).then((valid) => {
          console.log(valid);
          if (true === valid) {
            console.log('验证通过');
          } else {
            console.log(this.$validator.errors.all());
          }
        });
      },
      handleSendSms() {
        this.$validator.errors.clear();
        this.$validator.validateAll({
          mobile: this.mobile,
          img_captcha: this.img_captcha
        }).then((valid) => {
          console.log(valid);
          if (true === valid) {
            console.log('验证通过');
          } else {
            console.log(this.$validator.errors.all());
          }
        });
      }
    }
  }
</script>

外部引入的js (自定义提示内容)

export const messages = {
  custom: {
    mobile: {
      required: () => '请输入手机号码!',
      mobile: () => '手机号码有误',
    },
    img_captcha: {
      required: () => '请输入图形验证码!',
    },
    sms_captcha: {
      required: () => '请输短信验证码!',
      length: () => '短信验证码为6位数字'
    },
    password: {
      required: () => '密码不得为空',
      min: () => '密码不得小于8个字符',
    },
    re_password: {
      required: () => '请再次输入密码!',
      confirmed: () => '两次密码输入不一致'
    },
    nickname: {
      required: () => '请输入昵称',
      min: () => '昵称最小为3位字符',
      max: (field, params) => {
        return `昵称最大为${params[0]}位字符`;
      }
    },
    id_card: {
      required: "身份证号码不得为空"
    },
    birthday: {
      required: "请选择出生日期",
      date_format: "出生日期有误"
    },
    url: {
      required: () => "请输入个人网址",
      url: () => "网址输入有误"
    },
    email: {
      required: () => "请输入电子邮箱",
      email: () => "电子邮箱输入有误"
    },
    age: {
      required: () => "请输入年龄",
      between: () => "年龄必须在18-60岁之间"
    }
  },
};

扩展内容

自定义错误信息中显示配置验证规则中的参数

export const messages = {
  custom: {
    nickname: {
      required: () => "请输入年龄",
      between: (fiield,params) => `年龄必须在${params[0]}-${params[1]}岁之间"
    }
  },
};

规则里面第一个参数是字段名称 第二个参数是验证规则后面的参数;

验证指定字段

validateAll(field Object) 
validateAll({mobile:this.moble});

还可以使用 data-vv-scope 来指定 但是该方法并不适用一些场景;
显示错误信息的时候必须要指定scope的值 不然不会显示错误信息

查看原文

赞 18 收藏 12 评论 2

李冰 提出了问题 · 2019-01-15

php swoole 服务端消息推送

<?php
namespace app\index\controller;

class Pay {
  
    public function notice(){
        //想在这里通过websocket通知客户端支付成功 但是无法获取到 $server
    }
} 

swoole 只有在 获取到 $server 的时候才可以使用 $server->push();

但是在想在服务端主动给客户端推送消息的时候没办法获取到 $server 这个咋解决呢?

是需要用到 swoole websocket_client 去连接 websocket_server;
利用 clientserver send 数据 之后server再想客户端推送吗?

关注 4 回答 3

李冰 回答了问题 · 2019-01-08

vue中websocket的处理

楼主有办法解决了吗? 分享一下

关注 5 回答 4

李冰 提出了问题 · 2019-01-07

vue websocket 插件

有没有在vue中可以使用的websocket插件 支持断线重连的! vue-socket是不行的 因为我用的是swoole不是socket.io

关注 3 回答 2

李冰 提出了问题 · 2019-01-05

解决vue 有办法阻止手机键盘弹出吗?

制作一个转账的界面!
其中键盘是自己写的一个组件!
但是当Input获得焦点之后自己写的组件和手机自带的软键盘都一起弹出了!

使用 readonly 或者 document.activeElement.blur() 是可以 但是输入框却无法获得焦点了
有办法两全其美的解决吗?

关注 3 回答 2

李冰 提出了问题 · 2018-12-31

Oauth2.0的refresh token获取新的access_token后如何处理

在请求接口的时候在header中携带了access_tokenrefresh_token

如果access_token过期了会根据refresh_token获取新的 access_token , 之后更新 refresh_token的过期时间!

但是有个疑问哈 ! 在获取了新的access_token 后如何让写入到客户端呢?

比如场景

用户在登录了一段时间后(access_token 已经过期),去请求了订单列表!
但是在请求订单列表的时候 由于 access_token 已经过期! 所以要根据 refresh_token 去获取新的令牌!
我们是阻断订单列表的请求让其去获取新的 access_token 之后返回特定状态码! 客户端根据判断状态码 根据约定好的状态码判断是否写入 access_token ?
这样的话请求订单列表的请求已经没了 咋处理呢?

感觉说的好乱 有大神解答下吗? (有打赏)!

目前有一个思路

在请求的时候,判断token是否过期,如果没有过期,继续请求;
如果有过期就检测 refresh_token 是否过期 如果也过期了就让用户重新登录!
如果token 过期 但是 refresh_token 没有过期 就在中间件设置新的Token 更新refresh_token 的过期时间 ;请求继续 并且再返回的json中增加token字段!

{
  "status": 1,
  "msg": "获取订单列表成功",
  "data":[
    //业务数据
    ],
  "token" :"xxxxxxxxxxxxx"    //新的token

在客户端 响应拦截器 中 判断返回对象中如果有 token 字段 就将 旧的token 替换!

不知这种是否可行呢?

关注 5 回答 3

李冰 提出了问题 · 2018-12-24

beego有办法创建多级控制器吗?

比如php框架里面的 admin/userController index/userController等

在beego里面如何创建呢? 找了好久没找到类似于这种写法的文档和说明

关注 3 回答 2

李冰 提出了问题 · 2018-12-23

angular开发编译速度太慢咋办?

同样的电脑配置
用vue或者react都很快,但是到了angular 就算修改一点点css样式都编译半天!
好慢啊 有什么办法让编译变快点????

关注 2 回答 1

李冰 提出了问题 · 2018-12-19

解决php正则匹配的问题

在采集的时候有一个在抓取的内容里面有很多a链接!
其中我要获取

<ul class="list_box">
<li><a href="xxxx.html">xxxxx</a></li>
<li><a href="xxxx.html">xxxxx</a></li>
<li><a href="xxxx.html">xxxxx</a></li>
<li><a href="xxxx.html">xxxxx</a></li>
<li><a href="xxxx.html">xxxxx</a></li>
<li><a href="xxxx.html">xxxxx</a></li>
</ul>

但是我却无法获得每一个地址,是我写的有问题吗?

$patten = "/<ul\s*class=\"list_box\">\s*<li><a\s*href=\"(.*)\">(.*)<\/a><\/li>\s*<\/ul>/s";

居然匹配不到 请问下大神什么情况?
有时候能拿到 但是只能拿到一个....
我想要的是获取到全部的a地址 之后遍历采集

关注 3 回答 2

李冰 提出了问题 · 2018-12-06

解决css九宫格边框合并

<ul>
    <li>/省略代码/</li>
    <li>/省略代码/</li>
    <li>/省略代码/</li>
    <li>/省略代码/</li>
    <li>/省略代码/</li>
    <li>/省略代码/</li>
    <li>/省略代码/</li>
    <li>/省略代码/</li>
    <li>/省略代码/</li>
    <li>/省略代码/</li>
    <li>/省略代码/</li>
    <li>/省略代码/</li>
</ul>

sCss
ul{
width: 1200px;
display:flex;
 box-sizing: border-box;

li{
 width: calc(100% / 6);
 border: 1px solid red;
}
}

以上代码出现的边框会导致中间的一些边框为2px;

于是给li加了

 margin: 0 0 -1px -1px;

但是加了这个代码字后又导致每一行右边空出6px;

有什么好的办法吗?

我自己解决的一个办法 是不太友好

&:nth-child(6n) {
   width: calc(100% /6 + 6px);
}

关注 4 回答 3

认证与成就

  • 获得 13 次点赞
  • 获得 68 枚徽章 获得 2 枚金徽章, 获得 15 枚银徽章, 获得 51 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-06-11
个人主页被 576 人浏览