ElementPlus·表单验证

表单验证作用：省去一些错误的请求提交，节省后端接口压力。简单配置、自定义配置，最后进行统一校验工作。

如何校验 及 校验步骤：

 

简单配置

 
<template>
    // el-form 绑定 表单对象和规则对象，
    // 表单域 el-form-item 绑定使用的规则字段，
    // 具体表单组件（如 el-input）-> 双向绑定表单数据
    //        表单对象        规则对象
    <el-form :model='form' :rules='rules'>
        <el-form-item prop='校验规则对象' label=''>
            <el-input v-model='双向绑定 表单数据' />
        el-form-item>
    el-form>
template>

自定义规则

 
<template>
    <el-form :model='form' :rules='rules'>
        <el-form-item prop='校验某规则 对象' label=''>
            <el-input v-model='双向绑定 表单数据' />
        el-form-item>
    el-form>
template>

统一验证

 
<template>
    <el-form ref='标识名/表单实例对象formRef' :model='form' :rules='rules'>
        <el-form-item prop='某规则对象' label=''>
            <el-input v-model='某 表单数据' />
        el-form-item>
        // 点击时 进行统一校验
        <el-button @click='doLogin'>el-button>
    el-form>
template>

例子：登录校验

参考：Form 表单 | Element Plus (element-plus.org)