element-plus-validate-rules

基于 Element-Plus-Form 的表单验证规则

Installation

1  pnpm install element-plus-validate-rules

Usage

1<script lang="ts" setup>
2import { ElForm, ElFormItem, ElInput } from 'element-plus'
3import type { FormRules } from 'element-plus'
4import Rules from 'element-plus-validate-rules'
5
6const ruleForm = reactive<{ nickname: string }>({
7  nickname: '',
8})
9const rules: FormRules = [
10  {
11    nickname: [
12      ...Rules.str({
13        required: true,
14        max: 64,
15        name: '昵称',
16      }),
17    ],
18  }
19]
20</script>
21
22<template>
23  <ElForm
24    ref="ruleFormRef"
25    :model="ruleForm"
26    :rules="rules"
27    label-width="auto"
28    status-icon
29  >
30      <ElFormItem label="昵称" prop="nickname">
31        <ElInput v-model="ruleForm.nickname" placeholder="昵称" />
32      </ElFormItem>
33  </ElForm>
34</template>

内置Properties

公共配置项

Name	Type	Desc
required	boolean	是否必填
name	string	字段名称
max	number	最大长度
min	number	最小长度
len	number	长度
message	string	校验不通过时显示的信息, 会替代默认信息
validator	Function	自定义验证函数, 与 Element-Plus-Form 相同

更多配置项请参考 async-validator

str

字符验证

Name	Type	Desc	是否必填
required	boolean	是否必填	是

select

选择(下拉框)验证

Name	Type	Desc	是否必填
multiple	boolean	是否为多选	否

decimal

Name	Type	Desc	是否必填
precision	number	精度	否

小数类型验证, 精度默认为0, 即整数

int

整数类型验证

numberStr

内容为纯数字的string类型验证

mobile

手机号验证

password

密码验证, 目前验证规则为 至少八个字符, 至少一个字母, 一个数字和一个特殊字符

tel

固定电话验证

time

WIP

时间类型验证

License

MIT License © 2022 cymYoung