表单验证, 同时弹出警示框

方法一.

   this.$refs.form.validate(valid => {
        if (!valid) {
          this.$message.warning('请完善必填信息')
          return false
        }
    }

通过在form表单中设置ref='form' 使用el 默认的validate 实现,统一校验

缺陷:

并不是每一条实时弹出警示框, 只在提交时统一弹出警示框

方法二.

 

data () {
    let validate = (rule, value, callback) => {
      if (!value) {
        this.$message.warning('请完善必填信息')
        callback(new Error('请完善必填信息'))
      }
    }
    const input = { validator: validate, required: true, trigger: 'blur' }
    const select = { validator: validate, required: true, trigger: 'change' }
    return {


 通过自定义校验实现效果, 会实时弹出警示框, 但是如果必填项过多未填写, 会弹出多个警示框,
可以通过修改message开限制次数

message限制方法具体如下.

1. 创建一个js文件

 
import { Message } from 'element-ui'
let messageInstance = null
const resetMessage = (options) => {
  if (messageInstance) {
    messageInstance.close()
  }
  messageInstance = Message(options)
};
['error', 'success', 'info', 'warning'].forEach(type => {
  resetMessage[type] = options => {
    if (typeof options === 'string') {
      options = {
        message: options
      }
    }
    options.type = type
    return resetMessage(options)
  }
})
export const message = resetMessage

 2. 在main.js中导入

import { message } from '导入的message文件地址'

Vue.prototype.$message = message

缺点

代码较多, 自行选择