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>