1. 基本三大组件

<el-form>  <el-form-item>    <el-input/>  </el-form-item></el-form>

2. 数据收集

在 el-form 上面指定 model，在 el-input 组件加 v-model 进行双向数据绑定

3. 数据校验

在el-form 上面指定 rules 校验规则，在 el-form-item 组件加 prop，指定要校验的字段

<template>  <div id="app">    <!-- 卡片组件 -->    <el-card class="login-card">      <!-- 登录表单 -->      <el-form style="margin-top: 50px" :model="loginForm" :rules="loginRules">        <el-form-item prop="mobile">          <el-input v-model="loginForm.mobile" placeholder="请输入手机号" />        </el-form-item>        <el-form-item prop="password">          <el-input v-model="loginForm.password" placeholder="请输入密码" />        </el-form-item>        <el-form-item>          <el-button type="primary" style="width: 100%">登录</el-button>        </el-form-item>      </el-form>    </el-card>  </div></template> <script>export default {  name: "App",  components: {},  data() {    return {      loginForm: {        mobile: "",        password: ""      },      loginRules: {        mobile: [          { required: true, message: "手机号不能为空", trigger: "blur" },          {            pattern: /^1[3-9]\d{9}$/,            message: "请输入正确的手机号",            trigger: "blur"          }        ],        password: [          { required: true, message: "密码不能为空", trigger: "blur" },          {            min: 6,            max: 16,            message: "密码应为6-16位的长度",            trigger: "blur"          }        ]      }    };  }};</script>3.1自定义校验规则<script>export default {  name: 'App',  data() {    const customValidatorMobile = (rule, value, callback) => {      // 无论符不符合规则，都要调用 callback，只不过，校验失败要传递一个错误对象，校验成功不用传递任何内容      value[2] === '9' ? callback() : callback(new Error('第三个数字必须是 9'))    }    return {      loginRules: {        mobile: [          {            validator: customValidatorMobile,            trigger: 'blur'          }        ],      }    }  }}</script>

3.2 表单预校验，当所有的内容都符合规则了，才去调用对应的接口

<el-form ref="loginFormRef"></el-form>async handleSubmit() {  this.$refs['loginFormRef'].validate(function(valid) {    if (!valid) return console.log('失败')    // 发请求调用接口  })  // 这里不能直接调用接口    }

————————————————

原文链接：https://blog.csdn.net/weixin_57435656/article/details/120915409