还在为ElementUI的原生校验方式苦恼吗，快用享受element-ui-verify插件的快乐吧（待续）

news2024/10/7 18:25:08

element-ui-verify

本文章意在介绍element-ui-verify插件使用，以及对比elementUI原生校验方式，突显该插件用少量代码也能实现原生的校验效果甚至更好。

1.先观察一个示例
在这里插入图片描述

<template>
    <d2-container>
        <el-form :model="ruleForm" :rules="rules" label-width="100px">
            <el-form-item label="活动名称" prop="name">
                <el-input v-model="ruleForm.name" style="width: 200px"></el-input>
            </el-form-item>
        </el-form>
    </d2-container>
</template>

<script>
export default {
  data () {
    return {
      ruleForm: {
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

上面是官方文档的一个校验示例

在这里插入图片描述

<template>
    <d2-container>
        <el-form :model="ruleForm2" label-width="100px">
            <el-form-item label="活动名称" prop="name" verify :minLength="3" :maxLength="5">
                <el-input v-model="ruleForm2.name" style="width: 200px"></el-input>
            </el-form-item>
        </el-form>
    </d2-container>
</template>

<script>
export default {
  data () {
    return {
      ruleForm2: {
        name: ''
      }
    }
  }
}
</script>

上面是使用element-ui-verify插件的一个示例，把原来写在data里的校验变量改为el-form-item的属性来校验，使得代码更加得简洁了。

2.element-ui-verify插件介绍
本插件只是对 ElementUI 原本的校验方式做了一层封装，核心的校验器仍然是 async-validator，非侵入式，完全不会影响你继续使用 ElementUI 的原生校验。

3.element-ui-verify插件安装和使用
安装

npm install element-ui-verify

引入

import Vue from 'vue'
import elementUI from 'element-ui'
import elementUIVerify from 'element-ui-verify'
 
// 这里注意必须得先use elementUI
Vue.use(elementUI)
Vue.use(elementUIVerify)

默认支持的校验规则属性

length: 校验文本长度
minLength: 校验文本最短长度
gt: 校验数字要大于某数
gte: 校验数字要大于等于某数
lt: 校验数字要小于某数
lte: 校验数字要小于等于某数
maxDecimalLength: 校验数字最大小数位
number: 校验是否为数字
int: 校验是否为整数
phone: 校验是否为手机号（随着号段的增加，未来可能需要更新）
email: 校验是否为电子邮件地址
verifyCode: 校验是否为 6 位数字验证码

插件的默认校验不通过提示模板

const errorMessageTemplate = {
  empty: '请补充该项内容',
  length: '请输入{length}位字符',
  minLength: '输入内容至少{minLength}位',
  number: '请输入数字',
  int: '请输入整数',
  lt: '输入数字应小于{lt}',
  lte: '输入数字不能大于{lte}',
  gt: '输入数字应大于{gt}',
  gte: '输入数字不能小于{gte}',
  maxDecimalLength: '该输入项最多接受{maxDecimalLength}位小数',
  phone: '请输入正确的手机号',
  email: '请输入正确的邮箱',
  verifyCode: '请输入正确的验证码'
}

// 可以对上面默认的错误提示模板修改
// 如第一项修改（用于复用错误提示） empty: '{alias}不能为空'
// 然后使用修改后的模板
Vue.use(elementUIVerify, {
	errorMessageTemplate,
	fieldChange: 'verify'
})
// 其中 verify-当绑定字段变化时会实时触发校验，clear-当绑定字段变化时只清空校验结果，不触发校验

4.重要属性说明

verify

若要使用element-ui-verify插件，verify选项是必须的，如果没有配置该选项，那么仍可以正常使用ElementUI原生的校验。该选项还可以接收一个函数值，用于自定义校验方法。

canBeEmpty

开启该项，一旦输入项为空则会忽略该输入项之后所有的校验。

space

开启该项，插件执行空检测时，输入空格可通过

emptyMessage

空检测错误提示

errorMessage

用于自定义校验不通过提示（空检测和自定义校验方法的错误提示不受该值影响）

alias

用于复用错误提示，需修改错误提示模板，如{ empty: ‘{ alias }不能为空’ }

watch

监听其他变量，触发自身校验

第一个例子，密码一致性校验

<template>
    <d2-container>
        <!-- 使用watch属性 密码一致性校验 -->
        <el-form :model="model">
            <el-form-item label="密码" prop="pass1" verify>
                <el-input v-model="model.pass1" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="pass2" :verify="verifyPassword" :watch="model.pass1">
                <el-input v-model="model.pass2" style="width: 200px"></el-input>
            </el-form-item>
        </el-form>
    </d2-container>
</template>

<script>
export default {
  data () {
    return {
      model: {
        pass1: '',
        pass2: ''
      }
    }
  },
  methods: {
    verifyPassword (rule, val, callback) {
      if (val !== this.model.pass1) callback(Error('两次输入密码不一致！'))
      else callback()
    }
  }
}
</script>

第二个例子，最少人数变化要触发最多人数的校验

<template>
    <d2-container>
        <!-- 最少人数变化要触发最多人数的校验 -->
        <el-form :model="model">
            <el-form-item label="最少参与人数" prop="minNumber" verify int :gt="0">
                <el-input v-model="model.minNumber" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="最多参与人数" prop="maxNumber" verify int :gt="model.minNumber">
                <el-input v-model="model.maxNumber" style="width: 200px"></el-input>
            </el-form-item>
        </el-form>
    </d2-container>
</template>

export default {
  data () {
    return {
      model: {
        minNumber: '',
        maxNumber: ''
      },
  }
}

自定义校验方法

verify

<template>
    <d2-container>
        <!-- 自定义校验方法 -->
        <el-form :model="model">
            <el-form-item label="卡号" prop="cardNumber" :verify="verifyCardNumber" :length="6">
                <el-input v-model="model.cardNumber" style="width: 200px"></el-input>
            </el-form-item>
        </el-form>
    </d2-container>
</template>

<script>
export default {
  data () {
    return {
      model: {
        cardNumber: ''
      }
    }
  },
  methods: {
    // callback形式 校验是否是010，011开头的卡号
    verifyCardNumber (rule, val, callback) {
      if (!['010', '011'].includes(val.substr(0, 3))) callback(Error('错误的卡号'))
      else callback()
    }
  }
}
</script>