表单验证

我们基于 el-form 的表单验证，额外的预设了一些列常用表单验证函数。

快速创建验证规则

您可以直接使用 buildValidatorRule() 函数快速的构建表单验证规则，该函数接受一个 object，位于 @/utils/validate。

/**
 * 构建表单验证规则
 * @param {object} paramsObj 参数对象
 */
buildValidatorRule(paramsObj)

paramsObj 可用属性

参数名	注释
name	规则名，可用规则
message	验证错误消息
title	验证项标题仅常用规则支持此属性
trigger	验证触发方式：change、blur

示例代码

<template>
    <div>
        <!-- 一定要设置好 rules 和 model 属性，以及 el-form-item 的 prop 属性 -->
        <el-form ref="formRef" :rules="rules" :model="ruleForm">
            <el-form-item label="变量名" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>

            <el-form-item label="变量分组" prop="group">
                <el-select v-model="ruleForm.group">
                    <el-option label="分组1" value="1"></el-option>
                    <el-option label="分组2" value="2"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="描述" prop="desc">
                <el-input v-model="ruleForm.desc"></el-input>
            </el-form-item>

            <el-button v-blur @click="onSubmit" type="primary"> 提交 </el-button>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { buildValidatorRule } from '@/utils/validate'
import type { FormInstance, FormRules } from 'element-plus'
import { reactive, ref } from 'vue'

const formRef = ref<FormInstance>()
const ruleForm = reactive({
    name: '',
    group: '',
    desc: '',
})

// 此处直接使用 buildValidatorRule 生成了表单验证规则；element plus 文档中的原生 object 写法可以混用
const rules = reactive<FormRules>({
    name: [buildValidatorRule({ name: 'required', title: '变量名' }), buildValidatorRule({ name: 'varName' })],
    group: [buildValidatorRule({ name: 'required', trigger: 'change', message: '请选择分组' })],
})

const onSubmit = () => {
    if (!formRef.value) return
    formRef.value.validate((valid) => {
        if (valid) {
            // 验证通过
        }
    })
}
</script>

可用验证规则

可以通过 buildValidatorRule() 创建的验证规则。

常用规则

常用规则可用使用 title 属性

buildValidatorRule({ name: 'required', title: '必填' }) // 请输入必填
buildValidatorRule({ name: 'required', message: '标题是必填的', trigger: 'change' }) // 标题是必填的

buildValidatorRule({ name: 'number', title: '数字' }) // 请输入正确的数字
buildValidatorRule({ name: 'number', message: '您输入的数字不正确', trigger: 'change' }) // 您输入的数字不正确

buildValidatorRule({ name: 'integer', title: '整数' }) // 请输入正确的整数
buildValidatorRule({ name: 'float', title: '浮点数' }) // 请输入正确的浮点数
buildValidatorRule({ name: 'date', title: '日期' }) // 请输入正确的日期
buildValidatorRule({ name: 'url', title: 'URL' }) // 请输入正确的URL
buildValidatorRule({ name: 'email', title: 'Email' }) // 请输入正确的Email

预设验证规则

预设规则不可以使用 title ，请使用完整的 message 代替

buildValidatorRule({ name: 'mobile', message: '请输入正确的手机号' }) // 请输入正确的手机号
buildValidatorRule({ name: 'account', message: '请输入正确的账户', trigger: 'change' }) // 请输入正确的账户
buildValidatorRule({ name: 'password', message: '请输入正确的密码', trigger: 'change' }) // 请输入正确的密码
buildValidatorRule({ name: 'varName', message: '请输入正确的变量名称' }) // 请输入正确的名称
buildValidatorRule({ name: 'richTextRequired', message: '内容不能为空' }) // 内容不能为空