Element-plus-validate-rules NPM

element-plus-validate-rules

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

Installation

  pnpm install element-plus-validate-rules

Usage

<script lang="ts" setup>
import { ElForm, ElFormItem, ElInput } from 'element-plus'
import type { FormRules } from 'element-plus'
import Rules from 'element-plus-validate-rules'

const ruleForm = reactive<{ nickname: string }>({
  nickname: '',
})
const rules: FormRules = [
  {
    nickname: [
      ...Rules.str({
        required: true,
        max: 64,
        name: '昵称',
      }),
    ],
  }
]
</script>

<template>
  <ElForm
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    status-icon
  >
      <ElFormItem label="昵称" prop="nickname">
        <ElInput v-model="ruleForm.nickname" placeholder="昵称" />
      </ElFormItem>
  </ElForm>
</template>

内置Properties

公共配置项

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