vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

下面是关于如何实现“vue+element-ui集成随机验证码+用户名+密码的form表单验证功能”的完整攻略。

确定所需组件

首先我们需要引入vue和element-ui组件库，以及一个用于生成随机验证码的插件，常用的有vue-verify-plugin等。

<template>
  <div class="form-container">
    <el-form :model="formData" :rules="formRules" ref="form" label-width="80px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="formData.password"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="verifyCode">
        <el-row>
          <el-col :span="16">
            <el-input v-model="formData.verifyCode"></el-input>
          </el-col>
          <el-col :span="8">
            <img :src="verifyCodeImg" class="verify-code-img" @click="refreshVerifyCode">
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">登录</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import { generateVerifyCode } from './utils/verifyCode'
import { mapState } from 'vuex'

Vue.use(ElementUI)

export default {
  data() {
    return {
      formData: {
        username: '',
        password: '',
        verifyCode: ''
      },
      formRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        verifyCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapState({
      verifyCodeImg: state => state.verifyCodeImg
    })
  },
  methods: {
    refreshVerifyCode() {
      this.$store.dispatch('refreshVerifyCode')
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 提交表单
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style>
.form-container {
  width: 400px;
  margin: 20px auto;
}

.el-row {
  margin-bottom: 10px; 
}

.el-col:last-child {
  text-align: right;
}

.verify-code-img {
  width: 100%;
  cursor: pointer;
}
</style>

这是一个简单的登录表单组件，包含用户名、密码和验证码三项内容。其中，用户名和密码必填，而验证码需要用户填写生成的随机验证码。在表单提交时会进行表单验证，如果验证不通过则会提示用户输入正确的信息。

加载随机验证码图片

创建一张用于展现验证码的图片，并利用该字体来生成对应的随机验证码图片（这里我们可以调用使用到vue-verify-plugin这个插件）。

// ./utils/verifyCode.js

import Vue from 'vue'
import './verifyCode.css'

const VerifyCode = function() {
  const fontNames = ['Consolas', 'Arial', '宋体', '黑体', '楷体']

  const FONT_SIZE = 18 // 字体大小
  const CANVAS_WIDTH = 80
  const CANVAS_HEIGHT = 32
  const MIN_OFFSET = FONT_SIZE / 2 // 字体最小偏移量
  const MAX_OFFSET = FONT_SIZE // 字体最大偏移量
  const MAX_ANGLE = Math.PI / 6 // 字体最大旋转角度

  const getRandomFont = () => {
    const idx = Math.floor(Math.random() * fontNames.length)
    return fontNames[idx]
  }

  const getRandomChar = () => {
    const charCode = Math.floor(Math.random() * 26) + (Math.random() > 0.5 ? 65 : 97)
    return String.fromCharCode(charCode)
  }

  const getRandomAngle = () => {
    return (Math.random() - 0.5) * 2 * MAX_ANGLE // 随机方向（正负）
  }

  const getRandomNumber = (min, max) => {
    return Math.floor(Math.random() * (max - min) + min)
  }

  const drawLine = (ctx) => {
    const startX = getRandomNumber(0, CANVAS_WIDTH / 2)
    const startY = getRandomNumber(0, CANVAS_HEIGHT / 2)
    const endX = getRandomNumber(CANVAS_WIDTH / 2, CANVAS_WIDTH)
    const endY = getRandomNumber(CANVAS_HEIGHT / 2, CANVAS_HEIGHT)
    ctx.beginPath()
    ctx.lineWidth = 1
    ctx.strokeStyle = '#ccc'
    ctx.moveTo(startX, startY)
    ctx.lineTo(endX, endY)
    ctx.stroke()
  }

  const generateVerifyCode = () => {
    let verifyCode = ''
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    canvas.width = CANVAS_WIDTH
    canvas.height = CANVAS_HEIGHT

    // 绘制背景
    ctx.fillStyle = '#fff'
    ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT)

    // 绘制干扰线
    for (let i = 0; i < 4; i++) {
      drawLine(ctx)
    }

    // 绘制文字
    const halfSize = FONT_SIZE / 2
    const offsetTop = CANVAS_HEIGHT / 2 - halfSize
    const offsetLeft = CANVAS_WIDTH / 8

    for (let i = 0; i < 4; i++) {
      const char = getRandomChar()
      const x = i * offsetLeft + getRandomNumber(MIN_OFFSET, MAX_OFFSET)
      const y = getRandomNumber(offsetTop - MIN_OFFSET, offsetTop + MAX_OFFSET)
      const rotateAngle = getRandomAngle()

      ctx.font = `${FONT_SIZE}px ${getRandomFont()}`
      ctx.fillStyle = `rgb(${getRandomNumber(100, 200)}, ${getRandomNumber(100, 200)}, ${getRandomNumber(100, 200)})`
      ctx.translate(x + halfSize, y + halfSize)
      ctx.rotate(rotateAngle)
      ctx.fillText(char, -halfSize, halfSize)
      ctx.rotate(-rotateAngle) 
      ctx.translate(-x - halfSize, -y - halfSize)

      verifyCode += char
    }

    Vue.prototype.$verifyCodeImg = canvas.toDataURL('image/png')
    Vue.prototype.$verifyCodeText = verifyCode
  }

  return {
    generateVerifyCode
  }
}

export const verifyCode = new VerifyCode()

通过上面的代码在canvas中实现了随机验证码的生成，最终将生成的验证码图片和验证码字符串都挂载到了vue的原型上，由此可以通过 Vue.prototype.$verifyCodeImg 和 Vue.prototype.$verifyCodeText 访问到该图片以及相应的验证码字符串。

页面中使用该图片和字符串就可以展示随机验证码了（在上面的示例中，Img标签的src就是对应的图片地址）。

表单验证

在表单验证中，我们可以利用Element-ui提供的表单验证来完成用户输入项的验证。

export default {
  data() {
    return {
      formData: {
        username: '',
        password: '',
        verifyCode: ''
      },
      formRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        verifyCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 提交表单
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.form.resetFields()
    }
  }
}

以上就是利用Element-ui提供的Form表单验证完成用户输入项验证的代码示例，当用户输入的数据不符合表单规则时，登录将无法执行，同时表单下方对应的字段也会提示信息。