我们的表单中有用户名、密码、电话号码、邮箱这四个项。
我们设置用户名为3到20位的非空字符
密码为3到25位非空字符
电话号码就用目前用的电话号码正则表达式，要求手机号码以 1 开头，第二位为 3 到 9 之间的数字，后面跟着任意 9 个数字，总共是 11 位数字。
邮箱就用目前用的邮箱正则表达式，要求一个或多个字母、数字或下划线，接着是 @ 符号，然后是一个或多个字母、数字或下划线，接着是一个句点，最后是一个或多个字母、数字或下划线。
首先搭建页面 写几个input框
<el-form ref="form"> <el-form-item> <el-input :prefix-icon="User" placeholder="请输入用户名"></el-input> </el-form-item> <el-form-item> <el-input :prefix-icon="Lock" placeholder="请输入密码"></el-input> </el-form-item> <el-form-item> <el-input :prefix-icon="Phone" placeholder="请输入电话号码"></el-input> </el-form-item> <el-form-item> <el-input :prefix-icon="Message" placeholder="请输入邮箱"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="register">注册 </el-button> </el-form-item> </el-form>
为了方便传数据到后端，我们就设置前端表单项的属性名和后端的一样。再在<script setup></script>里面定义数据模型为registerData，里面有username,password,phone,email。初始都设为空的
import {ref} from 'vue' //定义数据模型 const registerData = ref({ username: '', password: '', phone: '', email: '' })
<el-form-item> <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input> </el-form-item>
比如设置了数据模型名为registerData后在v-model中用户名我们要写registerData.username。以此类推密码、号码、邮箱。
然后要定义表单规则，校验嘛。我们要写在表单的上面，在<script setup></script>里面生效。
