新增-表单校验

frontend/src/views/demo/proTable/singleColumn.vue

@@ -1,35 +1,53 @@
 <!--单列-->
 <template>
-  <el-dialog v-model='dialogVisible' :title='title' v-bind='dialogSmall' >
+  <el-dialog v-model='dialogVisible' :title='title' v-bind='dialogSmall'>
     <el-scrollbar>
-      <el-form :inline="false"  label-width="auto"  ref="formRef">
-        <el-form-item label="姓名" prop="username">
+      <el-form
+          :model='form'
+          :inline='false'
+          label-width='auto'
+          ref='formRuleRef'
+          :rules='rules'
+      >
+        <el-form-item label='姓名' prop='username'>
           <el-input
+              v-model='form.username'
+              placeholder='请输入姓名'
           ></el-input>
         </el-form-item>
 
-        <el-form-item label="性别" prop="gender">
+        <el-form-item label='性别' prop='gender'>
+          <el-radio-group v-model='form.gender'>
+            <el-radio-button :label='0'>男</el-radio-button>
+            <el-radio-button :label='1'>女</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label='年龄' prop='age'>
           <el-input
+              v-model='form.age'
+              placeholder='年龄'
           ></el-input>
         </el-form-item>
 
-        <el-form-item label="年龄" prop="age">
+        <el-form-item label='身份证号' prop='idCard'>
           <el-input
+              v-model='form.idCard'
+              placeholder='身份证号'
           ></el-input>
         </el-form-item>
 
-        <el-form-item label="身份证号" prop="id">
+        <el-form-item label='邮箱' prop='email'>
           <el-input
+              v-model='form.email'
+              placeholder='邮箱'
           ></el-input>
         </el-form-item>
 
-        <el-form-item label="邮箱" prop="email">
-          <el-input
-          ></el-input>
-        </el-form-item>
-
-        <el-form-item label="居住地址" prop="address">
+        <el-form-item label='居住地址' prop='address'>
           <el-input
+              v-model='form.address'
+              placeholder='居住地址'
           ></el-input>
         </el-form-item>
 
@@ -46,6 +64,60 @@
 </template>
 <script setup lang='ts'>
 import { dialogSmall } from '@/utils/elementBind'
+import { FormInstance, FormItemRule } from 'element-plus'
+
+interface userForm {
+  id?: string;       //用户ID，作为唯一标识
+  username: string; //用户名
+  gender: number; // 性别
+  age: number; // 年龄
+  idCard: string; // 身份证
+  email: string; // 邮箱
+  address?: string; // 地址
+}
+
+const form: Ref<userForm> = ref({
+  username: '',
+  gender: 0,
+  age: 1,
+  idCard: '',
+  email: '',
+})
+
+const formRuleRef = ref<FormInstance>()
+//定义校验规则
+const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
+  username: [{ required: true, message: '用户名必填！', trigger: 'blur' }],
+  age: [
+    { required: true, message: '年龄必填！', trigger: 'blur' },
+    // 指定正则，此处是数字正则
+    { pattern: /^[1-9][0-9]?$|^100$/, message: '年龄必须在1到100之间', trigger: 'blur' },
+  ],
+  idCard: [
+    { required: true, message: '身份证必填！', trigger: 'blur' },
+    // 指定正则，此处是身份证正则
+    { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号码', trigger: 'blur' },
+  ],
+  email: [
+    { required: true, message: '邮箱必填！', trigger: 'blur' },
+    // 指定校验类型
+    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
+  ],
+})
+
+/**
+ * 重置表单
+ */
+const resetForm = () => {
+  form.value = {
+    username: '',
+    gender: 0,
+    age: 1,
+    idCard: '',
+    email: '',
+    address: '',
+  }
+}
 
 const dialogVisible = ref(false)
 const title = ref('单列弹出框')
@@ -54,12 +126,39 @@ const open = (textTitle: string) => {
   title.value = textTitle
 }
 
+// 关闭弹出框
 const close = () => {
+  //重置表单内容
+  //取消表单校验状态
+  formRuleRef.value && formRuleRef.value.resetFields()
   dialogVisible.value = false
+  resetForm()
 }
 
+/**
+ * 校验表单数据
+ * 数据没问题，提交数据，并根据业务情况请求新增接口还是修改接口
+ */
 const confirmForm = () => {
   ElMessage.info('业务数据提交')
+  try {
+    formRuleRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        // 将表单数据转为json,发送到后端
+        let confirmFormData = JSON.parse(JSON.stringify(form.value))
+        console.log(confirmFormData)
+        if ('是否新增') {
+          // 执行新增接口
+        } else {
+          // 执行修改接口
+        }
+      } else {
+        ElMessage.error('表单验证失败！')
+      }
+    })
+  } catch (error) {
+    console.error('验证过程中发生错误', error)
+  }
 }
 
 defineExpose({ open })