实名认证表单添加验证和提交修复

实名认证功能已进行以下改进：
- 表单字段添加了验证规则，以确保用户输入有效的姓名和身份证号。- 修复了表单提交逻辑，确保只有在通过验证后才会进行实名认证提交。
-调整了实名认证弹窗关闭时的处理逻辑。
- 修正了实名认证成功后的导航路径。

src/views/money/user/index.vue

@@ -10,7 +10,7 @@
         width="30%"
         @close="handleDialogClose"
       >
-        <el-form :model="authForm">
+        <el-form :model="authForm" :rules="rules" ref="authFormRef">
           <el-form-item label="姓名" :label-width="formLabelWidth">
             <el-input v-model="authForm.name"></el-input>
           </el-form-item>
@@ -63,7 +63,7 @@
 </template>
 
 <script>
-import { userBalance } from "@/api/system/user"; //
+import {userBalance} from "@/api/system/user"; //
 import * as echarts from 'echarts' //引用echarts
 import {checkRealNameAuth} from "@/api/system/user";
 
@@ -74,7 +74,7 @@ export default {
       dialogVisible: false,
       dialogFormVisible: false,
       formLabelWidth: '120px',
-      opinionData: ["155", "400", "900", "800", "300", "900", "270","684","165","0","300","150"], // 数据
+      opinionData: ["155", "400", "900", "800", "300", "900", "270", "684", "165", "0", "300", "150"], // 数据
       userBalanceData: {
         userBalance: '加载中...'
       },
@@ -82,9 +82,17 @@ export default {
         name: '',
         idCard: ''
       },
-      form:{
-
-      }
+      rules: {
+        name: [
+          {required: true, message: '请输入姓名', trigger: 'blur'},
+          {min: 2, max: 10, message: '姓名长度在 2 到 10 个字符', trigger: 'blur'}
+        ],
+        idCard: [
+          {required: true, message: '请输入身份证号', trigger: 'blur'},
+          {pattern: /^\d{17}[\dXx]$/, message: '身份证号格式不正确', trigger: 'blur'}
+        ],
+      },
+      form: {}
     };
   },
   created() {
@@ -117,38 +125,46 @@ export default {
       }
     },
     async handleConfirm() {
-      try {
-        const { name, idCard } = this.authForm;
-        const authResponse = await checkRealNameAuth(this.authForm);
-        if (authResponse.code ==200 ) {
-          this.$message.success('实名认证成功');
-          this.dialogVisible = false;
-          this.$router.push('/money/zfb');
+      this.$refs.authFormRef.validate(async (valid) => {
+        if (valid) {
+          try {
+            const {name, idCard} = this.authForm;
+            const authResponse = await checkRealNameAuth(this.authForm);
+            if (authResponse.code == 200) {
+              this.$message.success('实名认证成功');
+              this.dialogVisible = false;
+              this.$router.push('/money/zfb');
+            } else {
+              this.$message.error('实名认证失败，请检查您的信息');
+            }
+          } catch (error) {
+            this.$message.error('实名认证验证失败，请稍后再试');
+            console.error('实名认证验证失败:', error);
+          }
         } else {
-          this.$message.error('实名认证失败，请检查您的信息');
+          console.log('error submit!!');
+          return false;
         }
-      } catch (error) {
-        this.$message.error('实名认证验证失败，请稍后再试');
-        console.error('实名认证验证失败:', error);
-      }
+      });
+
     },
     async fetchUserBalance() {
       try {
         const userId = localStorage.getItem('userId');
         console.log(userId)// 登录后把userId存到了localStorage
         if (!userId) {
-          this.userBalanceData = { userBalance: '未登录' };
+          this.userBalanceData = {userBalance: '未登录'};
           return;
         }
         const response = await userBalance(userId);
-        if (response.data ) {
+        if (response.data) {
           console.log(response.data)
           this.userBalanceData.userBalance = response.data;
         } else {
-          this.userBalanceData.userBalance = { userBalance: '获取失败' };
+          this.userBalanceData.userBalance = {userBalance: '获取失败'};
         }
       } catch (error) {
-        this.userBalanceData = { userBalance: '获取失败' };
+        this.userBalanceData = {userBalance: '获取失败'};
         console.error('Error fetching user balance:', error);
       }
     },