前面的课程，搭建了一个初始化的koa工程。光说不练假把式，今天开始，使用koa+vue+layui开发一个登录界面。主要内容如下:

<div id="app">
    <form class="layui-form layui-form-pane" action>
      <div class="layui-form-item">
        <label class="layui-form-label">输入框</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="title"
            required
            lay-verify="required"
            placeholder="请输入标题"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
    </form>
  </div>

添加外层的container，并添加button按钮

<div class="layui-container">
    <form>
        ...
        <button type="button" class="layui-btn">点击登陆</button>
        <a class="imooc-link" href="http://www.layui.com">忘记密码</a>
    </form>
</div>

验证码占位

<div class="layui-form-item">
  <label class="layui-form-label">验证码</label>
  <div class="layui-input-inline">
    ...
  </div>
  <div class="layui-form-mid svg" v-html="svg"></div>
</div>
<script>

export default {
  data () {
    return {
      svg: '11111'
    }
  }
}
</script>

效果如下:

图形验证码生成

使用了插件svg-captcha

koa 后台需要借助第五课生成的工程进行开展。

具体使用方法如下：

npm i captcha

import svgCaptcha from 'svg-captcha';

class PublicController {
  constructor() { }
  async getCaptcha(ctx) {
    const newCaptcha = svgCaptcha.create({});
    ctx.body = {
      code: 200,
      msg: newCaptcha.data
    }
  }
}

export default new PublicController()

启动服务，访问localhost:3000/capycha.

结果如下：

前端调用

使用axios.

npm install axios

created () {
    this.getCaptcha()
  },
  methods: {
    getCaptcha () {
      axios.get('http://localhost:3000/captcha').then((res) => {
        if (res.status === 200) {
          let obj = res.data
          if (obj.code === 200) {
            this.svg = obj.data
          }
        }
      })
    }
  }

刷新页面，图形码生成。

图形验证码优化

如果需要配置一些验证码的参数，可以如下配置:


const newCaptcha = svgCaptcha.create({
  size: 6,     // 6个字符
  noise: Math.floor(Math.random() * 5), // 干扰线数量
  ignoreChars: 'o0li1', // 容易混淆的数值去除
  color: true, // 添加颜色
  width: 150, // 设置svg的高宽
  height: 50
});

vuelidate

引入

npm install vuelidate -S

main.js Use

// main.js
import Vuelidate from 'vuelidate'

Vue.config.productionTip = false
Vue.use(Vuelidate)

组件内使用方法

<script>
import { required,email } from 'vuelidate/lib/validators'
methods: {
    ...
    setName (val) {
      this.username = val
      this.$v.username.$touch()
    }
  }
validations: {
    name: {
      required,
      email
    },
    age: {
      required
    }
  },
</script>

<div class="layui-form-item" :class="{ 'form-group--error': $v.username.$error }">
  <label class="layui-form-label">用户名</label>
  <div class="layui-input-inline">
    <input
      ...
      v-model.trim="$v.username.$model"
      @inpput="setName($event.target.value)"
    />
  </div>
  <!-- 如果没有填写用户名的时候显示 -->
  <div v-if="!$v.username.required" class="error layui-form-mid">请输入用户名</div>
  <!-- 用户名不符合规则的时候 -->
  <div v-if="!$v.username.email" class="error layui-form-mid">用户名输入格式错误</div>
</div>


<style>
.error {
  display: none;
}
.form-group--error {
  .error {
    display: block;
  }
}
</style>

这里有几点我记录一下:

:class="{ 'form-group--error': $v.username.$error }" 是配合 v-model.trim="$v.username.$model" 使用的，默认情况下，错误提示是不显示的，输入文字的时候，才去显示。
methods 里面需要在@input的时候，设置username的值，并且触发this.$v.username.touch()告诉validate做一次校验。

其他见文档

VeeValidate 的使用

安装

npm i vee-validate

引入

// main.js
import VeeValidate from 'vee-validate'
Vue.use(VeeValidate)
// 组件内使用
<div class="layui-form-item">
  <label class="layui-form-label">用户名</label>
  <div class="layui-input-inline">
    <input
      type="text"
      name="username"
      v-model.trim="username"
      v-validate="'required|email'"
      placeholder="请输入标题"
      autocomplete="off"
      class="layui-input"
    />
  </div>
  <div class="error layui-form-mid">{{errors.first('username')}}</div>
</div>

把提示变成中文

// 方法1： 

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


// 方法2： 可以自定义错误信息
// src/local/index.js
import { Validator } from 'vee-validate'

import { Validator } from 'vee-validate'

const dictionary = {
  'zh-CN': {
    messages: {
      required: field => '请输入' + field,
      email: () => '请输入正确的邮箱格式',
      min: () => '密码位数不正确',
      size: (field, params) => '验证码要求为' + params
    },
    attributes: {
      email: '邮箱',
      password: '密码',
      username: '账号',
      code: '验证码'
    }
  }
}

Validator.localize(dictionary)
//main.js
import './local/index'
Vue.use(VeeValidate)
const validator = new Validator()
validator.localize('zh-CN')

今天学习的课程就到这里结束了。

我是海明月，前端小学生。

大前端学习第六课：使用vue + layui + Koa 图形验证码功能

目录

项目搭建

初始化项目

引入layui的css样式