vue+element 学习之路（五）自定义表单校验

最新推荐文章于 2024-08-02 10:16:42 发布

倔强的啊强

最新推荐文章于 2024-08-02 10:16:42 发布

阅读量992

点赞数

本文链接：https://blog.csdn.net/weixin_39327044/article/details/89574622

版权

本文介绍了在Vue+Element UI中实现自定义表单验证的方法，包括非空校验和格式校验。讲解了如何使用required、max、min等规则定义表单验证，并通过ref属性绑定和遍历表单进行校验。同时强调了在提交表单时进行二次校验的重要性，以确保数据的准确性。

摘要由CSDN通过智能技术生成

示例：

非空校验：
在这里插入图片描述格式校验：

几个常用的校验规则
required：是否非空
max：最大字符数
min：最小字符数

首先给表单绑定校验规则，表单加上ref属性，最后方便遍历表单校验
在这里插入图片描述定义规则：
rules中定义的校验方法通过prop属性传递

当然了这只是第一步校验，当输入框变化时进行校验，为了保证数据正确性，我们通常在提交表单时需要再校验一次

在这里插入图片描述
控制台
源码：


<template>
<div>
    <el-form :model="reUser" :rules="rules" ref="reUser">
        <!-- 隐藏数据 -->
        <input type="hidden" v-model="reUser.userId"/>
        <!-- 隐藏数据 -->

        <!-- 第一行 -->
        <el-row :gutter="30">
            <el-col :span="8">
                <el-form-item label="姓名" label-width="80px" prop="name">
                    <el-input placeholder="请填写真实姓名" v-model="reUser.name"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="性别" prop="gender">
                    <el-select placeholder="请选择性别" v-model="reUser.gender">
                        <el-option label="男" value="M"></el-option>
                        <el-option label="女" value="F"></el-option>