el-form 的自定义验证规则

el-form 的自定义验证规则

// 页面结构
<el-form-item label="上传图片" prop="image">
              <el-upload
                class="avatar-uploader"
                list-type="picture-card"
                :action="uploadUrl"
                :on-success="handleSuccess"
                :on-remove="handleRemove"
                :before-upload="beforeAvatarUpload"
                :limit="9"
                :on-exceed="handleExceed"
                :file-list="imgList"
                multiple
              >
                <i class="el-icon-plus"></i>

                <div class="el-upload__tip" slot="tip">
                  只能上传<span style="color:red"> jpg/jpeg/png </span>
                  文件，且不超过
                  <span style="color:red">5Mb</span>，图片尺寸要求为580*350
                </div>
              </el-upload>
            </el-form-item>

// js 自定义验证规则

   const validateLogo = (rule, value, callback) => {
      if (this.imgList.length == 0) {
        callback(new Error('请上传图片'))
      } else {
        callback()
      }
    }

其实验证规则的原理就是判断图片上传组件绑定的值是否为空

little tips

情况：多个页面需要用到同一个验证规则，在每个页面都创建一个自定义验证规则会造成代码的冗余

解决办法：封装到一个 js 文件中，需要用到时 import 进来即可

// 权重 自定义验证规则    只允许输入0-999
export let checkWeight = (rule, value, callback) => {
  regex(rule, value, callback)
}

function regex (rule, value, callback) {
  if (!value) {
    return callback(new Error('权重不能为空'))
  }
  var rule = value < 1000 ? false : true
  if (rule) {
    callback(new Error('请输入0-999范围内的数字'))
  } else {
    callback()
  }
}

引用页面

import { checkWeight } from '@/utils/validata'

export default {
  data () {
    return {
      rules: {
        name: [{ required: true, message: '请输入菜品名称', trigger: 'blur' }],
        weight: [{ required: true, validator: checkWeight, trigger: 'blur' }]
      },

    }
  },