新增验证码

src/views/user/component/add.vue

@@ -8,6 +8,7 @@ import { ElMessage } from "element-plus";
 const formDataRef = ref(null);
 const formDataInfo = reactive({
     mobile: '',
+    code: '',
     real_name: '',
     user_ship: '',
     selectedValues: [],
@@ -18,6 +19,9 @@ const formDataRules = reactive({
         { required: true, message: '请输入手机号', trigger: 'blur' },
         { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
     ],
+    code: [
+        { required: true, message: '请输入验证码', trigger: 'blur' }
+    ],
     real_name: [
         { required: true, message: '请输入用户姓名', trigger: 'blur' }
     ],
@@ -151,7 +155,11 @@ defineExpose({
     <div class="add-user">
         <el-form :model="formDataInfo" :rules="formDataRules" ref="formDataRef" label-width="80px">
             <el-form-item label="用户电话" prop="mobile">
-                <el-input v-model="formDataInfo.mobile" placeholder="请输入用户电话" />
+                <el-input v-model="formDataInfo.mobile" placeholder="请输入用户电话"  style="flex: 1;"/>
+                    <el-button type="primary" style="margin-left: 1rem;">获取验证码</el-button>
+            </el-form-item>
+            <el-form-item label="验证码" prop="code">
+                <el-input v-model="formDataInfo.code" placeholder="请输入验证码"  style="flex: 1;"/>
             </el-form-item>
             <el-form-item label="用户姓名" prop="real_name">
                 <el-input v-model="formDataInfo.real_name" placeholder="请输入用户姓名" />